Question

我有一个滚动指示器按钮，当用户滚动时X会在屏幕外平移，而当用户向上滚动时会向后显示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容器，也请使用固定高度，因为每次切换该部分时，文档都会自动滚动，这将再次触发事件（反跳）。

我希望这行得通！

有没有一种方法可以隐藏滚动元素并在用户停止滚动时显示？

1 个答案: