最近做大屏展示系统，列表部分不能出现滚动条，而css设置滚动条样式又可能存在兼容性问题，所以就想着用js实现一个简单的滚动效果，基本实现思路就是通过监听鼠标滚轮动作，利用容器的定位属性进行位移。

代码实现：

html:

<div id="scroll-view">        <div id="outside-box">            <div id="scroll-box">                <div class="list-item">1</div>            </div>        </div>    </div>

css:

#scroll-view {        width: 200px;        height: 100px;        overflow: hidden;        border: 1px solid red;} #outside-box {        width: 100%;        height: 100%;        overflow: hidden;        position: relative; }#scroll-box {        position: absolute;        top: 0;        width: 100%;        height: auto;} .list-item{        width: 100%;        height: 30px;        display: flex;        align-items: center;        justify-content: center;

软件开发概念。二进制代码中放大镜内的Javascript编程语言。Software

js：

let isScroll=false;let arr=[1,2,3,4,5,6,7,8,19];let scrollView = document.getElementById('scroll-view');let scrollBox = document.getElementById('scroll-box');let outSideBox = document.getElementById('outside-box');//监听鼠标移入scrollView.addEventListener('mouseenter', () => {        isScroll = true;})//监听鼠标移除scrollView.addEventListener('mouseleave', () => {        isScroll = false;})//监听滚轮scrollView.addEventListener('wheel', (res) => {        if (isScroll) {            let top = getComputedStyle(scrollBox).getPropertyValue('top');            let outSideHight = getComputedStyle(outSideBox).getPropertyValue('height');//外部容器高度            let itemNode=document.getElementsByClassName('list-item')[0];            let itemHeight=getComputedStyle(itemNode).getPropertyValue('height');//列表项高度,一定要在列表渲染后获取，不然会为空            let needY = arr.length * parseInt(itemHeight) - parseInt(outSideHight);//需要滚动的距离            let speed=40;//滚动速度，可根据需要进行调整            if (res.deltaY > 0) {                //向下滚动                let value = parseInt(top);                if (Math.abs(value) < Math.abs(needY)) {                    value -= speed;                    scrollBox.style.top = `${value}px`;                } else {                    //到底了                }                //若数据未加载完成，执行加载                            } else {                //向上滚动                let value = parseInt(top);                if (value < 0) {                    value += speed;                    scrollBox.style.top = `${value}px`;                } else {                    //到顶了                }            }        }    })//渲染数据    function renderData(){        let scrollBox = document.getElementById('scroll-box');        let str='';        arr.map((item)=>{            str+= `<div class='list-item'>${item}</div>`        })        scrollBox.innerHTML=str;    }renderData();

一个简单的滚动效果就实现了，可以根据业务需要，调整滚动速度以及下滑加载更多数据。