网页大同

现在很多的网页都是瀑布流,滚动鼠标滚轮时,网页向下加载新内容。今天就来试试Web网页很少采用的横向滚动的方式。通过JavaScript代码来实现。

HTML部分

我们设置三个div来模拟三个不同内容的页面

<body>
<main>
    <div class="container">
        <div class="page">Page1</div>
        <div class="page">Page2</div>
        <div class="page">Page3</div>
    </div>
</main>
</body>

CSS部分

先初始化,然后设置父级容器横向滚动条,设置页面的宽高,然后使用nth-child()选择器设置每个页面的背景色,以便区分。

<style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .container {
            display: flex;
            overflow-x: scroll;
        }

        .page {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            font-size: 70px;

        }

        .page:nth-child(1) {
            background: #e70404;
        }

        .page:nth-child(2) {
            background: #00d3ff;
        }

        .page:nth-child(3) {
            background: #00ff4c;
        }
    </style>

JavaScript部分

为父级容器添加鼠标滚轮事件,使鼠标上下滚动控制网页水平左右方向。

<script>
    let container = document.querySelector(".container");
    container.addEventListener("wheel", (event) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    });
</script>

预览GIF

想制作不一样的个人主页可以基于此想法开发,别具一格的Web网页也能吸引到别人哦。

最后修改:2021 年 06 月 15 日 12 : 03 AM
本文作者:博主:    
文章标题:用短短几行JS代码,实现滚动鼠标滚轮,网页横屏滚动。
本文地址:https://www.iftiger.com/archives/142.html     
版权说明:若无注明,本文皆为“泰戈尔のBlog”原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。