Вопрос по JS для кастомизации overlayscrollbars

KianoT
На сайте с 04.04.2012
Offline
95
135

Ребята, кто с 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 information
var 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
На сайте с 26.05.2013
Offline
225
#1
Правильно - через CSS. Понимаю, что вопрос не про это, но большинство кастомных скроллбаров обычно довольно глючные. 
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
KianoT
На сайте с 04.04.2012
Offline
95
#2

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);
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий