一个人如何绑定滚动条的释放

Schpr 发表于 Dev

施普

在10年7月，有人提出了类似的问题。（参见此处）
，当时的最高答案是无法实现。

有人知道现在怎么可能吗？
我在这里看到过它：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>

然后绑定“ .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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。