JS实现鼠标滚轮横向滚动特效

最新推荐文章于 2024-09-02 09:26:54 发布

咬着拽天下的程序猿

最新推荐文章于 2024-09-02 09:26:54 发布

阅读量598

点赞数 1

分类专栏： js 世界文章标签： javascript css 前端

本文链接：https://blog.csdn.net/LS_952754/article/details/126312359

版权

js 世界专栏收录该内容

39 篇文章 5 订阅

订阅专栏

点击打开视频讲解

<!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>末晨曦吖</title>
</head>
<body>
    <div id="app">
       <div class="content">
            <div class="page">滚动页面1</div>
            <div class="page">滚动页面2</div>
            <div class="page">滚动页面3</div>
       </div>
    </div>
    <script>
       let content = document.querySelector('.content')
       content.addEventListener('wheel',(event) => {
            event.preventDefault();
            content.scrollLeft += event.deltaY
       })
    </script>
</body>
<style scoped>
    body{
        padding: 0;
        margin: 0;
    }
    .content{
        display: flex;
        overflow-x: scroll;
    }
    .page{
        width: 100%;
        height: 100vh;
        flex-shrink: 0;
    }
    .page:nth-child(1){
        background: red;
    }
    .page:nth-child(2){
        background: blue;
    }
    .page:nth-child(3){
        background: yellow;
    }
</style>
</html>