Как проверить позицию скролла на javascript праивльно?

Question

[Андрей]

Есть fancybox, со скроллом внизу.
Добавил кнопки вправо-влево. Правая "показывается" всегда, левая - только после нажатия правой; и левая пропадает если вернуться в самое начало. Если нажать в самый конец, то потом идет возврат в начало и кнопкая левая пропадает.
Хочу сделать чтобы левая кнопка появлялась после скроллинга.
На javascript накидал функцию, который "ловит" позицию скролла и меняет свойства элемента (Левая кнопка).

function leftbut() {
                var slbox = document.getElementsByClassName('single-screens')[0]; // блок с картинками
                var prev_el = document.getElementById('prev');  // Левая кнопка
                if (slbox.scrollLeft > 50) {
                    prev_el.style.opacity='1'; // "показываем"
                    prev_el.className = "det-pic-control go"; // Меняем стиль; + для обработки jquery
                } else if (slbox.scrollLeft <= 50) {
                    prev_el.style.opacity='0';
                    prev_el.className = "det-pic-control";
                }
            }

Далее вызывал setInterval(leftbut, 300); НО
1) думаю это неправильно :-)
2) в режиме инкогнито Chrome, и в браузере FireFox не работает..

Подскажите, как сделать "правильно"? Возможно, есть event? или для jquery?

Как это выглядит

Comments

[ProjectSoft]

Не менять стиль, а переопределить. Практически без JS.
Ещё точнее. В API fancybox можно назначить свой класс контейнеру. Вот от него и пляшите с CSS.
Из JS только задать класс контейнеру.

[Андрей]

ProjectSoft, а как "слушать" изменение скролла, не подскажите? :-)

[ProjectSoft]

Андрей, там же в API документации есть описание событий.
Если fancybox инициализируется инлайн методом (с помощью аттрибута data-fancybox. Самое простое

$(document).on('afterShow.fb', function( e, instance, slide ) {
	console.log(arguments)
});

Если fancybox инициализируете самостоятельно, то добавьте в опции обработку события afterShow или beforeShow (на ваше усмотрение)

$('#gallery').fancybox({
	afterShow : function( instance, current ) {
		console.info( instance );
		console.info( current);
	}
});

Где instance - это сам fansybox инициализированный для данного слайдера или кониента
current - текущей слайдер

API документация - fancyapps.com/fancybox/3/docs/#api

[ProjectSoft]

Андрей, если не меняли шаблоны fancybox, то получить правую и левую кнопку

$(document).on('afterShow.fb', function( e, instance, slide ) {
	let arrowLeft = $('.fancybox-button--arrow_left', instance.Guestures.$container);
	let arrowRight = $('.fancybox-button--arrow_right', instance.Guestures.$container);
	console.log(arrowLeft, arrowRight);
});

Или

$('#gallery').fancybox({
	afterShow : function( instance, current ) {
		let arrowLeft = $('.fancybox-button--arrow_left', instance.Guestures.$container);
		let arrowRight = $('.fancybox-button--arrow_right', instance.Guestures.$container);
		console.log(arrowLeft, arrowRight);
	}
});

[Андрей]

ProjectSoft, мы о разных вещах говорим :) Кнопки в данном случае fancybox не предвидены. Фанси не вызывается!
Есть теги img в контейнере, и скрипт который по кнопкам листает. При нажатии на картинку уже вызывается фансибокс.
Сейчас все работает, поправил, но все также через setInterval.

[Андрей]

ProjectSoft, спасибо, возьму на заметку по fancybox, но сейчас немного не о том речь.

[ProjectSoft]

Андрей, тогда с самого начала.
Что за галерея со скроллом? Это плагин или просто размещённый контент в блоке с включённой нижней прокруткой?

[Андрей]

ProjectSoft, есть небольшая галерея, со скроллом, при нажатии на картинку fancybox.
И есть небольшой скрипт, который накладывает боковые кнопки для скролла внутри галереи.

[ProjectSoft]

Андрей, теперь понял.
Повесьте событие scroll на элемент, который содержит полосу прокрутки.