一、效果展示

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>

2. 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;
    }

3. 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 # 前端