jquery - 有没有办法隐藏滚动元素并在用户停止滚动时显示？

Question

我有一个滚动指示器按钮，它在用户滚动时将 X 移出屏幕，并在用户向上滚动时显示回来。我希望按钮在用户停止滚动时出现/返回，而不是在他们向上滚动时出现。

我尝试切换类，但它的行为不正确。

jQuery:

var prev = 0;
var $window = $(window);

$window.on('scroll', function(){
    var scrollTop = $window.scrollTop();
    scrollButton.toggleClass('hidden', scrollTop > prev);
    prev = scrollTop;
});

CSS:

.hidden {
   transform: translateX(250%);
 }

Answer 1

您可以通过将超时用作阈值来实现这一点。

例如:

var timer;
$(document).scroll(function(){

  if(timer != "undefined"){
    clearTimeout(timer);
  }
  
  $('p').hide();
  timer = setTimeout(function(){
    
    $('p').show();

  },250)//Threshold is 100ms

});

<style>

body{height:1000px;width:100%;}
div{width:100%;height:150px;overflow:hidden;}
p{background-color:black;color:white;width:100px;margin:50px auto;padding:20px;}  

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Hide on scroll</p>
</div>

Note: Make sure that the section you want to hide is contained inside a div container with a overflow:hidden; property, Also use a fixed height, because every time that section is toggled the document will scroll automatically which will trigger the event again (debouncing).

我希望这有效!