My Personal Blog

Published on

横向滚动效果

Authors
  • avatar
    Name
    Tian Haipeng

实现鼠标滚轮控制图片列表横向滚动的小Demo

在这篇博客中，我将分享一个通过鼠标滚轮实现图片列表横向滚动的简单Demo。废话不多说直接上代码。

第一步：创建嵌套布局

首先，我们需要实现三个盒子的嵌套布局。这些盒子将帮助我们调整内容的旋转和定位，从而实现横向滚动的效果。

<div id="container">
    <div id="vertical">
        <div id="horizontal">
            <img src="https://picsum.photos/800/600?1" alt="">
            <img src="https://picsum.photos/800/600?2" alt="">
            <img src="https://picsum.photos/800/600?3" alt="">
            <img src="https://picsum.photos/800/600?4" alt="">
            <img src="https://picsum.photos/800/600?5" alt="">
            <img src="https://picsum.photos/800/600?6" alt="">
        </div>
    </div>
</div>

在这个结构中，container是最外层的盒子，vertical是中间竖着的容器，而horizontal是横着则包含了所有的图片。

第二步：获取容器的宽高并调整vertical盒子

接下来，我们需要获取最外层盒子container的宽高，并将其赋值给中间的vertical盒子。vertical盒子的宽度应该设置为container的高度，而高度则设置为container的宽度。

function updateDimensions() {
    const container = document.getElementById('container');
    const vertical = document.getElementById('vertical');
    const horizontal = document.getElementById('horizontal');

    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;

    vertical.style.width = containerHeight + 'px';
    vertical.style.height = containerWidth + 'px';
    horizontal.style.height = containerHeight + 'px';
    horizontal.style.width = containerWidth + 'px';
    horizontal.style.position = 'absolute';
    horizontal.style.left = containerHeight + 'px';
    vertical.style.transformOrigin = 'left top';
    vertical.style.transform = 'rotate(-90deg)';
    vertical.style.translate = '0px ' + containerHeight + 'px';
}

window.addEventListener('resize', updateDimensions);
window.addEventListener('load', updateDimensions);

第三步：调整horizontal的宽高

我们需要为horizontal盒子设置与container相同的宽高，以确保它覆盖了整个container。

horizontal.style.height = containerHeight + 'px';
horizontal.style.width = containerWidth + 'px';

第四步：定位horizontal盒子

为了确保在旋转90度后horizontal能够完全显示，我们需要将其定位，并将left值设置为container的高度。这是因为在旋转后，horizontal会超出页面的可视范围，所以我们需要通过调整位置使其保持在视图内。

horizontal.style.position = 'absolute';
horizontal.style.left = containerHeight + 'px';

第五步：旋转horizontal盒子

现在，我们将horizontal盒子顺时针旋转90度，并设置旋转中心为左上角，这样它与vertical盒子重合。

#horizontal {
    display: flex;
    transform-origin: left top;
    transform: rotate(90deg);
}

第六步：旋转vertical盒子

接着，将vertical盒子逆时针旋转90度，同样设置旋转中心为左上角，并将其向下移动container的高度，以确保它与horizontal盒子保持对齐。

vertical.style.transformOrigin = 'left top';
vertical.style.transform = 'rotate(-90deg)';
vertical.style.translate = '0px ' + containerHeight + 'px';

最后一步：隐藏滚动条

为了获得更好的用户体验，可以通过CSS将滚动条隐藏掉，使得界面更加整洁。

body {
    overflow: hidden;
}

body::-webkit-scrollbar, #vertical::-webkit-scrollbar {
    display: none;
}

效果展示

现在，完成了所有步骤，鼠标滚轮即可控制图片列表的横向滚动。以下是最终代码的展示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            overflow: hidden;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #vertical {
            position: relative;
            transform-origin: left top;
            overflow: hidden scroll;
        }

        #vertical::-webkit-scrollbar {
            display: none;
        }

        #horizontal {
            display: flex;
            transform-origin: left top;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
<div id="container">
    <div id="vertical">
        <div id="horizontal">
            <img src="https://picsum.photos/800/600?1" alt="">
            <img src="https://picsum.photos/800/600?2" alt="">
            <img src="https://picsum.photos/800/600?3" alt="">
            <img src="https://picsum.photos/800/600?4" alt="">
            <img src="https://picsum.photos/800/600?5" alt="">
            <img src="https://picsum.photos/800/600?6" alt="">
        </div>
    </div>
</div>

<script type="text/javascript">
    function updateDimensions() {
        const container = document.getElementById('container');
        const vertical = document.getElementById('vertical');
        const horizontal = document.getElementById('horizontal');

        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;

        vertical.style.width = containerHeight + 'px';
        vertical.style.height = containerWidth + 'px';
        horizontal.style.height = containerHeight + 'px';
        horizontal.style.width = containerWidth + 'px';
        horizontal.style.position = 'absolute';
        horizontal.style.left = containerHeight + 'px';
        vertical.style.transformOrigin = 'left top';
        vertical.style.transform = 'rotate(-90deg)';
        vertical.style.translate = '0px ' + containerHeight + 'px';
    }

    window.addEventListener('resize', updateDimensions);
    window.addEventListener('load', updateDimensions);
</script>
</body>
</html>

通过这个小Demo，你可以轻松实现图片列表的横向滚动效果。这个效果可以用于展示多个图片或其他内容，提供了一个与众不同的滚动方式。