How to check scroll position in javascript correctly?

Question

JavaScript

There is a fancybox, with a scroll at the bottom.
Added left and right buttons. The right one is always "shown", the left one - only after pressing the right one; and the left one disappears if you return to the very beginning. If you press at the very end, then there is a return to the beginning and the left button disappears.
I want to make the left button appear after scrolling.
I added a function to javascript that "catches" the scroll position and changes the properties of the element (Left button).

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

Then called setInterval(leftbut, 300); BUT
1) I think it's wrong :-)
2) in Chrome incognito mode, and in the FireFox browser does not work ..

Tell me how to do it "correctly"? Perhaps there is an event? or for jquery?

What does it look like