JS滚动窗口实现

Yukino 478 2021-12-29

一、效果展示

  1. 自动滚动
  2. 滚动到底部延迟一秒自动回到顶部
  3. 悬浮暂停滚动、放大并可手动滚动

二、实现原理

用一个较小的div(一般称为wrap)挡住后面更大的列表,利用Js获取列表并更改其scrollTop达到滚动效果。

  1. html代码
<div id="review_box" class="scorll-wrap">
    <ul id="comment1">
        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
        <li>第四条</li>
        <li>第五条</li>
    </ul>
</div>
  1. css
    * {
        margin: 0;
        padding: 0;
    }

    #comment1 {
        list-style: none;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scorll-wrap::-webkit-scrollbar {
        display: none;
    }

    
    .scorll-wrap {
        /* Hide scrollbar for IE, Edge and Firefox */
        /* IE and Edge */
        -ms-overflow-style: none;
        /* Firefox */
        scrollbar-width: none;

        min-height: 52px;
        height: 52px;
        overflow: scroll;
        border: 1px solid red;
        text-align: center;
        width: 100px;
        margin: auto;
    }

    @keyframes 
    show {
        0% {
            height: 52px;
        }
        100% {
            height: 100px;
        }
    }

    .scorll-wrap:hover {
        animation: .8s show forwards;
    }
  1. Js
window.onload = roll(50);
function roll(t) {
    var ul1 = document.getElementById("comment1");
    var ulbox = document.getElementById("review_box");
    ulbox.scrollTop = 0; // 开始无滚动时设为0
    var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
    // 鼠标移入div时暂停滚动
    ulbox.onmouseover = function () {
        clearInterval(timer);
    }
    // 鼠标移出div后继续滚动
    ulbox.onmouseout = function () {
        timer = setInterval(rollStart, t);
    }
}
var flag = false;
// 开始滚动函数
function rollStart() {
    // 上面声明的DOM对象为局部对象需要再次声明
    var ul1 = document.getElementById("comment1");
    var ulbox = document.getElementById("review_box");
    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
    if (ulbox.scrollTop >= ul1.scrollHeight - ulbox.clientHeight) {
        if(!flag) {
            flag = true;
            setTimeout(function() {
                ulbox.scrollTop = 0;
                flag = false;
            }, 1000);
        }
    } else {
        ulbox.scrollTop++;
    }
}

三、实现细节

  1. 悬浮自动放大
    这个功能主要是利用CSS的hover实现的,放大的动画是@keyframe和animation实现的,具体可以参考使用CSS动画
  2. 到底部停留1s
    这个功能主要依赖
if (ulbox.scrollTop >= ul1.scrollHeight - ulbox.clientHeight) {
    if(!flag) {
        flag = true;
        setTimeout(function() {
            ulbox.scrollTop = 0;
            flag = false;
        }, 1000);
    }
}

通过定时器,延迟一秒钟之后将scrollTop置为0,这里需要注意的就是定时只能设置一次,如果不做处理就会在回到顶部之后停留(准确点是反复横跳)在顶部一秒钟
3. 如果放到实际项目页面中无法滚动(手动滚动)也无法触发暂停,尝试将scroll-wrap的z-index调高一点,如:

position: relative;
z-index: 1;

参考文章:原生JS实现列表内容自动向上滚动效果(这篇文章中有无缝滚动列表的实现)


# CSS # 前端