Ребята, кто с JS дружит, помогите разобраться, для вас простой вопрос, который не получается решить, так как у меня не хватает знаний по JS.
Вот зверь для кастомизации скроллбара:
https://www.npmjs.com/package/overlayscrollbars
Всё это дело вызывается:
document.addEventListener("DOMContentLoaded", function() {
//The first argument are the elements to which the plugin shall be initialized//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll('body'), { });
});
Далее есть вызов методов: https://www.npmjs.com/package/overlayscrollbars#methods
В данном случае речь идёт о поведение скролла:
example(s):
//get scroll informationvar scrollInfo = instance.scroll();
//scroll 50px on both axis
instance.scroll(50);
//add 10px to the scroll offset of each axis
instance.scroll({ x : "+=10", y : "+=10" });
//scroll to 50% on both axis with a duration of 1000ms
instance.scroll({ x : "50%", y : "50%" }, 1000);
//scroll to the passed element with a duration of 1000ms
instance.scroll($(selector), 1000);
Как блин это прописать? Всяко разно пытался прописать:
var scrollInfo = instance.scroll();
и
instance.scroll(50);
в код, которые первый в посте (выше). В консоли получаю в ответ одни ошибки, значит не правильно делаю, а как правильно?
Заранее спасибо!
D.iK.iJ
Правильно — через CSS. Понимаю, что вопрос не про это, но большинство кастомных скроллбаров обычно довольно глючные.
KianoT
D.iK.iJ, ох, дружище, было бы всё так просто со стилями) Статья по ссылке htmlbook кстати устаревшая, только для webkit, сейчас уже есть кастомизация под IE и Firefox, вот например готовый миксин для кастомного решения: https://dev.to/nirazanbasnet/css3-custom-scrollbar-1bl2
Можете использовать, кому надо.
Иногда на проектах не обойтись без JS для дрессировки того же скроллбара) Например мне нужно было, чтобы скроллбар в том же браузере Firefox на мобильных был виден, ведь по умолчанию он скрыт и показывает себя только если движением пальца навести на элемент, который сколлит. Само оформление через стили, а поведение через JS. Ещё задача — перевернуть скроллинг по оси X, т.е. скролл не слева на право, а наоборот. Тут тоже поведение через JS.
Многие скрипты уже пробовал, многие глючат, по ссылке в первом топике наиболее стабильный, уже на нескольких проектах применял в разработке. Тоже забирайте кому надо. По своему вопросу нашёл ответ. Ниже код, который решил мою маленькую задачу)
KianoT
Ребята, кто с JS дружит, помогите разобраться, для вас простой вопрос, который не получается решить, так как у меня не хватает знаний по JS.
Вот зверь для кастомизации скроллбара:
https://www.npmjs.com/package/overlayscrollbars
Всё это дело вызывается:
Далее есть вызов методов:
https://www.npmjs.com/package/overlayscrollbars#methods
В данном случае речь идёт о поведение скролла:
Как блин это прописать? Всяко разно пытался прописать:
var scrollInfo = instance.scroll();и
instance.scroll(50);в код, которые первый в посте (выше). В консоли получаю в ответ одни ошибки, значит не правильно делаю, а как правильно?
Заранее спасибо!
D.iK.iJ
KianoT
D.iK.iJ, ох, дружище, было бы всё так просто со стилями) Статья по ссылке htmlbook кстати устаревшая, только для webkit, сейчас уже есть кастомизация под IE и Firefox, вот например готовый миксин для кастомного решения:
https://dev.to/nirazanbasnet/css3-custom-scrollbar-1bl2
Можете использовать, кому надо.
Иногда на проектах не обойтись без JS для дрессировки того же скроллбара) Например мне нужно было, чтобы скроллбар в том же браузере Firefox на мобильных был виден, ведь по умолчанию он скрыт и показывает себя только если движением пальца навести на элемент, который сколлит. Само оформление через стили, а поведение через JS. Ещё задача — перевернуть скроллинг по оси X, т.е. скролл не слева на право, а наоборот. Тут тоже поведение через JS.
Многие скрипты уже пробовал, многие глючат, по ссылке в первом топике наиболее стабильный, уже на нескольких проектах применял в разработке. Тоже забирайте кому надо. По своему вопросу нашёл ответ. Ниже код, который решил мою маленькую задачу)
document.addEventListener("DOMContentLoaded", function() {var instance = OverlayScrollbars(document.querySelectorAll('body'),
{
className: "os-theme-dark"
});
instance.scroll(50);
});