2 个回答

可以实现。

基于 mousedown、mousemove、mouseup 来实现。down 的时候记录位置,move 的时候更新位置,up 的时候计算位置(判断是否超过阈值)。超过阈值就执行 返回顶部逻辑。

PC端mousedown,mousemove,mouseup
移动端touchstart,touchmove,touchend,touchcancel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main {
        height: 200vh;
        width: 100%;
    }
    .bar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100px;
        height: 200px;
        background: #ffe;
    }
    h1 {
        text-align: center;
    }
</style>
<body>
    <div class="bar">
        滑动区域
    </div>
    <div class="main">
        <h1>头部</h1>
    </div>
    <script>
        const oBar = document.querySelector('.bar')
        let y = 0
        const offset = 0
        oBar.onmousedown = function(event) {
            y = event.pageY
            console.log('down',y);
            oBar.onmousemove = function(event) {
                console.log('move')
                oBar.onmouseup = function(event) {
                    console.log('up')
                    const newY = event.pageY
                    if (newY - y > offset) {
                        backTop()
                    }
                    y = 0
                    oBar.onmouseup = null;
                    oBar.onmousemove = null;
                }
            }
        }
        function backTop() {
            console.log('hi')
            document.documentElement.scrollTop = 0
        }
    </script>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏