JQuery在div中垂直滚动时添加类并在水平滚动时删除类

Question

Can someone please help me out? I am trying to add (or show) a class on an element when a div scroll vertically but remove (or hide) that class when you scroll horizontally.

My code below is not working. Please take a look, thanks!

window.onload = function() {
    $('#myDiv').scroll(function () {
        var hScroll = $(this).scrollLeft();
        var vScroll = $(this).scrollTop();
        if (hScroll > 0){
            $('#element').removeClass("v_class").addClass("h_class");
        }
        if (vScroll > 0){
            $('#element').removeClass("h_class").addClass("v_class");

        }
    });
}

Answer 1

Don't check against zero, check against their old position like this:

window.onload = function() {
    var oldScrollLeft = $('#myDiv').scrollLeft();
    var oldScrollTop = $('#myDiv').scrollTop();

         $('#myDiv').scroll(function () {
             var hScroll = $(this).scrollLeft();
             var vScroll = $(this).scrollTop();

             //if the vertical scroll bar is in the same position after a scroll has occurred we must be scrolling horizontally, remove the vertical class and add the horizontal class.
             if(oldScrollTop == vScroll){
                  $('#element').removeClass("v_class").addClass("h_class");
             }
             //else we must be scrolling vertically, remove the horizontal class and add the vertical class.
             else{
                  $('#element').removeClass("h_class").addClass("v_class"); 
             } 
             oldScrollLeft = $(this).scrollLeft();
             oldScrollTop = $(this).scrollTop();
        });
    };