无缝滚动原理与具体实现

最新推荐文章于 2025-06-11 12:51:21 发布

screaming_color

最新推荐文章于 2025-06-11 12:51:21 发布

阅读量825

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端文章标签：滚动-视口

本文链接：https://blog.youkuaiyun.com/screaming_color/article/details/50225659

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

JavaScript

14 篇文章

订阅专栏

本文介绍了无缝滚动的实现原理，涉及到关键属性如scrollHeight、scrollTop等，并提供了一个向上滚动的代码示例，同时提到了向下、向左、向右滚动的变动点。通过循环滚动并监听鼠标事件，可以实现平滑的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

实现原理：
这里写图片描述

tab1与tab2是tab块里两个完全相同的子块，自然当tab高度无法容纳这两个块时，就会出现滚动条。
而我们要做的事情就是让滚动条自己移动。
这里写图片描述

如图滚动条往下，tab1一部分移出，tab2一部分移入，移出的a等于滚动条移动的距离b,这就是tab.scrollTop的值。可通过console.log(tab.scrollTop);查看。
同样建议用console.log(); 查看 .offsetTop / .offsetHeight 等。

这里写图片描述
当滚动条移动到底时，显然我没要吧滚动条置为最开始的位置！

     // tab.scrollTop = tab1.offsetHeight;
            //tab.scrollTop = 0;

这两条语句都可管用（#smile#）

最后setInterval（）让函数一直循环，效果就出来了。
当然也可以加上一些mouseover滚动停止，mouseout滚动继续的效果。

详细代码：
这是向上滚动的例子，

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝滚动</title>
    <style>
*{
    padding: 0;
    margin: 0;
}       
 #demo{
     overflow: hidden;;

     width: 50%;
     height: 72px;
     outline: solid 1px #000;
 }
 #demo1{//outline: solid 1px #e12;
     //background-color: antiquewhite;}
#demo2{ // outline:slateblue solid 1px
        }
    </style>
</head>

<body>
<div id="demo">
    <div id="demo1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <div id="demo2"></div>

</div>
<script>

    <!--向上滚动 -->
    var speed = 30;//滚动的速度
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    function Marquee(){
        if(tab2.offsetTop - tab.scrollTop <= 0 ){//当滚动条到达可见视图框底部的时候
            //console.log(tab.scrollTop);
            //console.log(tab1.offsetHeight);建议观察
            tab.scrollTop = tab1.offsetHeight;//此语句与下一条被注释的语句都是为了将滚动置为最初位置
            //tab.scrollTop = 0;
        }
        else{
            tab.scrollTop++;//滚动条往下移动
        }
    }
    var MyMar = setInterval(Marquee,speed);
    tab.onmouseover = function(){ clearInterval(MyMar)};//清除循环
    tab.onmouseout =  function(){MyMar = setInterval(Marquee,speed)};//恢复循环
</script>
</body>
</html>

向下滚动的话（两处变动）
1、

tab.scrollTop=tab.scrollHeight//将滚动条拉到底

2、

tab.scrollTop--;//滚动条往上移动

往左往右滚动则是变动 scrollTop offsetTop offsetHeight
top -> left
height -> width

github:https://github.com/screamingColor/mygit/blob/master/scrolling.html