Question

假设您有一个隐藏溢出的元素，是否可以在不滚动的情况下捕获该元素上的鼠标滚动？

我问这个的原因是;我有一个单页设计的网站，我写了一个脚本，当你向下或向上滚动时，它会自动滚动到下一个位置。但有一些我不想要的东西。当他们尝试滚动时，页面实际上是在滚动功能之前滚动滚动滚动以将其自身滚动到下一个位置。我打算将$current_directory/output.csv的{{1}}带到body，他们会看到没有滚动而是自动滚动。

例如：

HTML

overflow

CSS

hidden

JS

<body>
<div id="blue" class="clicked">
</div>
<div id="red" class="clicked">
</div>
<div id="green" class="clicked">
</div>
</body>

DEMO

Answer 1

我找到了答案，如果将来有人需要，这就是答案。

$(document).ready(function(){
  $(document).bind('mousewheel', function(evt) {
    $('body').animate({'scrollTop':'1000'},3000);
  });
});

DEMO

Answer 2

以下是元素overflow:hidden并在位置之间滚动的示例：

＆＃13;

var scroll_blocked = false;
$('.scrollable').on('mousewheel DOMMouseScroll', function (e) {
		
  if (!scroll_blocked){
		
		var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail);

		if (delta < 0){
    
      var new_pos = $('.scrollable').scrollTop() + $('.scrollable').height();
      if (new_pos > ($('.scrollable_inner').height() - $('.scrollable').height())) return false;
          
    } else if (delta > 0){
		
      var new_pos = $('.scrollable').scrollTop() - $('.scrollable').height();
      if (new_pos < 0) return false;
    
    }
    
    // scroll to new position
		$('.scrollable').animate({'scrollTop': new_pos}, 500);
    scroll_blocked = true;
    setTimeout(function(){
      scroll_blocked = false;
    }, 500);
    
	}
    
  // disable all other scroll
  return false;
  
});

＆＃13;

.scrollable {
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.scrollable_inner {

}

.box {
  height: 200px;
  width: 100%;
}

.box_green {
  background-color: green;
}

.box_blue {
  background-color: blue;
}

.box_red {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollable">
  <div class="scrollable_inner">
    <div class="box box_green">First slide - hover and scroll down</div>
    <div class="box box_blue">Middle slide</div>
    <div class="box box_red">Last slide -scroll up</div>
  </div>
</div>

＆＃13;

对于整个页面附加事件监听器：

// mouse
$('html').on('mousewheel DOMMouseScroll', function (e) { ...

// touch
$('body').on('touchmove', function(e) { ...

滚动整页

$('html,body').animate({'scrollTop': ...

Answer 3

你遇到的问题是，每次窗口滚动时，你都会触发一些使窗口滚动的代码，因此浏览器会因为卡在电路中而感到困惑。

最好将溢出保留为正常，并将代码滚动到诸如click事件处理程序之类的内容中，例如在一组链接上：

$("a").on('click', function(e) {
  var href = $(this).attr("href");
  e.preventDefault();

  var offsetTop = href === "#" ? 0 : $(href).offset().top;
  $('html, body').stop().animate({ scrollTop: offsetTop }, 500, 'swing')
};

如果您不希望用户必须单击，您可以在加载时设置定时器功能，定期触发滚动动画，但如果有某种方法可以覆盖它，那么最好是用户，因为它是当你想要停下来看一些东西时页面移动真的很烦人

捕获Scroll on Overflow：隐藏元素

3 个答案: