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

10年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>

然后绑定“ .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-如何绑定滚动条的释放

相关文章