网页的“滑动阻尼“实现”

原创于 2025-07-24 14:50:07 发布 · 341 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5 #css

教程来自B站大佬JIEJOE_轻敲代码

个人实现效果如下：

基础代码：

<body>
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
</body>

放几张图片

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #000000;
}
img{
    width: 40rem;
    margin-bottom: 5rem;
    pointer-events: none;
    user-select: none;
}

经典格式三剑客

    display: flex;
    flex-direction: column;
    align-items: center;

组件有分割的中间竖向排列

此时网页自动生成滑动条，不过是最常规的滑动条格式，没有拖曳感，比较机械

为了实现拖曳感，我们先来搞清楚网页滑动的基本原理：

实际上默认情况下我们滑动滚轮时，滚动的实际上不是整个网页而是我们现在看到的浏览器窗口。

教程中提到我们目前没办法给浏览器窗口增加缓冲，但是我们可以给网页运动时增加缓冲，于是思路就转化成了：网页容器不动，浏览器窗口滚动->浏览器窗口不动，容器滚动，同时给容器滚动增加缓冲

1.增加缓冲

将图片们放到新容器scrollbox中，通过修改scrollbox来增加缓冲

<div class="scrollbox">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
    <img src="./image/adbt.png">
</div>

.scrollbox{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;/* 取消scrollbox自适应 */
    transition: 0.15s ease;
}

其中transition为关键属性，给容器增加了0.15秒的缓进缓出

flex-shrink设置为0是为了取消scrollbox的自适应，否则后面增加东西会被压缩

let scrollbox = document.getElementsByClassName("scrollbox")[0];// 获取滚动盒子
function sroll(){

}
window.addEventListener("scroll",scroll);

同时为之后的修改做准备

2.固定浏览器窗口

浏览器窗口能移动的原因是网页body的容器大小远远超过了其窗口大小，所以我们只要将容器大小控制住，即可锁定浏览器窗口，为此，我们再给图片们加一个容器并修改它

<div class="viewbox">
    <div class="scrollbox">
        <img src="./image/adbt.png">
        <img src="./image/adbt.png">
        <img src="./image/adbt.png">
        <img src="./image/adbt.png">
        <img src="./image/adbt.png">
    </div>
</div>

.viewbox{
    position: fixed;
    top:0;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
}

此时我们锁定了浏览器窗口，但是同时滚轮条也消失了，为了重现滚轮条，我们做出尝试

3.还原高度

    let scroll_y = 0;
    let distance =10;
    window.addEventListener("wheel", () => {
        if(event.deltaY>0){
            scroll_y += distance;
        }else{
            scroll_y -= distance;
        };
        scroolbox.style.transform = `translateY(${scroll_y}px)`;
        
    });

通过监听滚轮的形式来实现

但是这样做会产生几个问题

（1）无限往上或者往下滑，因为我们没有设置边界，但是我们也不知道边界在哪里

（2）移动端运行时无法通过触碰来实现页面滚动，且不能自适应大小

所以我们用另一种方法

既然锁定浏览器窗口是通过压缩容器body来实现的，那我们在滑动时还原body高度即可，此时的body高度是被重新赋予的，我们用scrollbox（子物体）的高度值来赋予body，就可以避免边间问题

    function scroll(){
        scrollbox.style.transform = `translateY(${-scrollY}px)`;
    }
    function resize_body(){
        let heiht=scrollbox.offsetHeight;//获取scrollbox的高度
        document.body.style.height = `${heiht}px`;//赋予高度
    }
    window.addEventListener("scroll", scroll);
    window.addEventListener("load",resize_body);
    window.addEventListener("resize",resize_body);
    //每次重新进入页面都会自动获取scrollbox的高度

（完）

ps：实现此效果原理上讲其实不难，但是个人觉得还是有点难想到此方法