进度条跟着滑动内容变化

最新推荐文章于 2023-04-19 16:39:52 发布

m0_59325389

最新推荐文章于 2023-04-19 16:39:52 发布

阅读量139

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_59325389/article/details/126934866

版权

<!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>
        .container{
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow-x: scroll;
        }
        .box{
            width: 400px;
            height: 50px;
            border: 1px solid red;
        }
        .scrollBox{
            width: 50px;
            height: 10px;
            border: 1px solid black;
        }
        .a{
            width: 200px;
            position: relative;
        }
        .scrollBox{
            position: absolute;
            top: 150px;
            left: 50%;
            transform: translate(-50%);
        }
        .scrollBar{
            height: 100%;
            background-color: blue;
            width: 25px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="container">
            <div class="box">
                产生的吕尼的妇女v能否v发的女iv吃饭的驴奶粉的iv飞机能否v发的女年份的
                吃的数据库v放得开v芬迪v哦发vv反
            </div>
        </div>
        <div class="scrollBox">
            <div class="scrollBar">
    
            </div>
        </div>
    </div>
    <script>
        let container = document.querySelector('.container')
        console.log(container);
        let bx = document.querySelector('.scrollBar');
        container.addEventListener('scroll',function(e){
            console.log(e);
            console.log(e.target.clientWidth) // 盒子视图宽度
            console.log(e.target.scrollWidth) // 盒子宽度+滑动隐藏的宽度
            console.log(e.target.scrollLeft); 
            let a = (e.target.scrollWidth - e.target.clientWidth) / (50-25)
    
            // 内容盒子的宽度
            bx.style.marginLeft = e.target.scrollLeft / a +'px'
            console.log(bx.style);
        })
    </script>
</body>
</html>