捕获Scroll on Overflow：隐藏元素 [英] Capture Scroll on Overflow:Hidden elements
问题描述
假设你有一个隐藏溢出的元素，是否可以在不滚动的情况下捕获该元素上的鼠标滚动？
Suppose that you have an element with overflow hidden, is it possible to capture mouse scrolls on that element with out scrolling?
我问这个的原因是;我有一个单页设计的网站，我写了一个脚本，当你向下或向上滚动时，它会自动滚动到下一个位置。但有一些我不想要的东西。当他们尝试滚动时，页面实际上是在滚动功能之前滚动滚动滚动以将其自身滚动到下一个位置。我打算把 body 的溢出带到隐藏并且他们将看不到卷轴而是自动滚动。
The reason I'm asking this is; I have a single page designed website and I wrote a script that automaticlly scrolls to the next position as you scroll down or up. But there is something that I don't want. As they try to scroll, page is actually scrolling in real meaning before function fires on scroll to scroll itself to next position. I'm planning to take body's overflow to hidden and they will see no scrolls but autoscroll.
ex：
HTML
<body>
<div id="blue" class="clicked">
</div>
<div id="red" class="clicked">
</div>
<div id="green" class="clicked">
</div>
</body>
CSS
body{
overflow:hidden;
margin:0;
}
#blue{
background-color:blue;
width:100vw;
height:100vh;
}
#red{
background-color:red;
width:100vw;
height:100vh;
}
#green{
background-color:green;
width:100vw;
height:100vh;
}
JS
$(document).ready(function(){
$(document).scroll(function(){
$('body').animate({'scrollTop':'1000'},3000);
});
});
DEMO
推荐答案
以下是元素的示例溢出：隐藏并在头寸之间滚动：
Here is an example with element overflow:hidden and scrolling between positions:
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;
});
.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;
}
<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>
整页将事件监听器附加到：
For whole page attach event listeners to:
// mouse
$('html').on('mousewheel DOMMouseScroll', function (e) { ...
// touch
$('body').on('touchmove', function(e) { ...
滚动整页
$('html,body').animate({'scrollTop': ...
这篇关于捕获Scroll on Overflow：隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
