JS与CSS实现区域内容自动左右滑动

实现功能1、鼠标在区域内滚轮上/下滑能够实现内容左/右滑2、内容能够自动滑动，并且在到达区域两侧后能切换方向3、鼠标悬浮时能够停止滑动，并且此时支持滑轮操作4、鼠标从移入变为移出时自动滑动，滑动方向能够自动判断此期间的滑轮操作方向，或者按照移入前的方向继续滑动实现思路1、使用定时器来实现自动/停止滚动功能2、使用方向标志位来判定左/右滑动3、使用...

ALeeYaaaa

5367人浏览 · 2021-12-09 09:50:52

ALeeYaaaa · 2021-12-09 09:50:52 发布

实现功能

1、鼠标在区域内滚轮上/下滑能够实现内容左/右滑

2、内容能够自动滑动，并且在到达区域两侧后能切换方向

3、鼠标悬浮时能够停止滑动，并且此时支持滑轮操作

4、鼠标从移入变为移出时自动滑动，滑动方向能够自动判断此期间的滑轮操作方向，或者按照移入前的方向继续滑动

实现思路

1、使用定时器来实现自动/停止滚动功能

2、使用方向标志位来判定左/右滑动

3、使用标志位判断是否到达了两侧尽头，而不是单纯的利用scrollLeft，并且有时候scrollLeft会达不到预期效果（scrollLeft的值没办法比scrollWidth大时）

实现代码

（能够直接使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            width: 100%;
            background-color: cyan;
        }
        .parentDom {
            margin: auto;
            width: 600px;
            height: 300px;
            background-color: pink;
            overflow: auto;
        }
        .childDom {
            height: 100px;
            width: 1200px;
            display: flex;
        }
        .childDom1,
        .childDom2,
        .childDom3 {
            height: 100px;
            width: 400px;
            display: inline-block;
        }
        .childDom1 {
            background-color: purple;
        }
        .childDom2 {
            background-color: orange;
        }
        .childDom3 {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    
    <div 
        class="parentDom"
        id="parentDom"
    >
        <div class="childDom">
            <span class="childDom1"></span>
            <span class="childDom2"></span>
            <span class="childDom3"></span>
        </div>
    </div>

    <script>

        let isToRight = true
        let autoScrollLeftOrRightTimer = null

        const domElement = document.getElementById('parentDom')
        domElement.addEventListener('mousewheel', scrollLeftOrRight) // 绑定 鼠标滚轮 事件
        domElement.addEventListener('mouseleave', autoScrollLeftOrRight) // 绑定 鼠标移出 事件
        domElement.addEventListener('mouseenter', clearScrollLeftOrRight) // 绑定 鼠标移入 事件

        autoScrollLeftOrRight()

        // 支持利用鼠标左右滑动
        function scrollLeftOrRight (event) {
            
            const scrollLength = 100
            let delta = event.wheelDelta // 鼠标滑轮的度数
            // console.log('delta', delta);
            if (delta > 0) {
                // console.log('左滑');
                domElement.scrollLeft -= scrollLength
                // console.log(domElement.scrollLeft)
                isToRight = false
            } else {
                // console.log('右滑');
                domElement.scrollLeft += scrollLength
                // console.log(domElement.scrollLeft)
                isToRight = true
            }
        }

        // 自动滑动
        function autoScrollLeftOrRight () {
            clearInterval(autoScrollLeftOrRightTimer);

            let singleScrollWidth = 2 // 单次滑动的距离
            let resultPrev = 0
            let resultLast = 0
            let isTimeToChanged = false // 切换滑动的标志位

            autoScrollLeftOrRightTimer = setInterval(() => {
                resultPrev = domElement.scrollLeft
                // console.log('resultPrev - into : ', resultPrev);
                // console.log('domElement.scrollLeft : ', domElement.scrollLeft);

                if (isToRight) {
                    domElement.scrollLeft += singleScrollWidth
                    // console.log('domElement.scrollLeft - isToRight', domElement.scrollLeft)
                } else {
                    domElement.scrollLeft -= singleScrollWidth
                    // console.log('domElement.scrollLeft - isToLeft', domElement.scrollLeft)
                }

                resultLast = domElement.scrollLeft
                // console.log('resultLast - outto : ', resultLast);

                isTimeToChanged = resultPrev === resultLast ? true : false
                isToRight = isTimeToChanged ? !isToRight : isToRight
                // console.log('isTimeToChanged', isTimeToChanged);
                // console.log('isToRight', isToRight);
                // console.log('-----------------------------------------------');
            }, 66)
        }

        // 鼠标悬浮在上面时清除浮动
        function clearScrollLeftOrRight () {
            clearInterval(autoScrollLeftOrRightTimer)
        }

    </script>

</body>
</html>