js operation scroll bar event example_javascript skills

The example in this article describes how to operate scroll bar events in js. Share it with everyone for your reference. The specific analysis is as follows:

I have always wondered how to monitor scroll bar events, and today I finally understood it.

The code below is to monitor the scroll bar as long as it moves, and the code below returns the top div to display and hide

window.onscroll = function () { 
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 0) { 
    $(".cbbfixed").css("bottom", "10px"); 
  } else { 
    $(".cbbfixed").css("bottom", "-85px"); 
  } 
}

Note:

t: The distance between the scroll bar and the top end

t>0, that is, once the scroll bar scrolls, the if() statement is executed immediately. The code in else() is that when the scroll bar reaches the top, return to the top div to hide

Back to top button click operation:

$("#cgotop").click(function(){ 
  $('body,html').animate({ scrollTop: 0 }, 100); 
  return false; 
});

Supplement:

1. Monitor the scroll bar event of a certain element

$(selector).scroll(function(){.......});

2. Get the scrolling distance of the scroll bar

$(selector).scrollTop();
$(selector).scrollLefft();

I hope this article will be helpful to everyone’s JavaScript programming design.