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

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

您可以通过将Timeout 用作threshold 来实现。

例如：

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>

注意：确保您要隐藏的部分包含在里面 具有overflow:hidden; 属性的 div 容器，也使用固定的 高度，因为每次切换该部分时，文档都会 自动滚动，这将再次触发事件（去抖动）。

我希望这行得通！