gpt4 book ai didi

javascript - 如何绑定(bind)滚动条的释放

转载 作者:行者123 更新时间:2023-11-29 10:44:53 25 4
gpt4 key购买 nike

2010 年 7 月,有人提出了类似的问题。( See here )
当时,最高答案是无法实现。

有人知道现在怎么可能吗?
我在这里看到过:http://www.beoplay.com/Products/BeoplayA9
当您滚动条时,除了默认行为外,没有什么比这更重要的了,
然后当您释放它时,网站会滚动到最近的部分顶部。

这里有什么技巧?

为了达到类似的效果,我所能想到的就是像这样在网站顶部添加几个固定的 div

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.fake-bar {
position:fixed;
height:100%;
width:15px;
right:0;
overflow-y:scroll
}
</style>
</head>

<body>

<section style="height:500px">page 1</section>
<section style="height:500px">page 2</section>
<section style="height:500px">page 3</section>
<section style="height:500px">page 4</section>

<div class="fake-bar">
<div style="height:2000px;"></div>
</div>

<div class="fake-bar">
<div class="invisible-handler"></div>
</div>

</body>
</html>

然后绑定(bind)'.unvisible-handler'

但也许有更简单的方法,
B&O 网站似乎没有使用堆叠 div。

有人知道它是如何完成的吗?

最佳答案

您可以通过捕获窗口上的鼠标按下和鼠标弹起事件来实现。记录鼠标下移时窗口的滚动顶部,然后测试鼠标上移时的值是否不同。如果条件为真,则执行您需要执行的任何操作:

var initScr = 0;
$(window).on({
'mousedown':function(){
initScr = $(this).scrollTop();
}, 'mouseup':function(){
if($(this).scrollTop() !== initScr){
console.log('change'); //Your function to go to the nearest section
}
}
});

JSFiddle

关于javascript - 如何绑定(bind)滚动条的释放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21631503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com