左右滑动css

基础概念

左右滑动（Horizontal Scrolling）是一种网页设计效果，允许用户通过鼠标滚轮、触摸板或者手指滑动来水平滚动页面内容。这种效果通常用于展示超出视口宽度的内容，如长图、多列布局或者横向排列的项目。

类型

纯CSS实现：通过CSS属性来实现左右滑动效果。
JavaScript辅助：结合JavaScript来实现更复杂的滑动效果，如自动播放、触摸滑动等。

应用场景

图片画廊：展示一系列横向排列的图片。
产品展示：在有限的空间内展示多个产品。
长图展示：展示超出视口宽度的长图。

示例代码

纯CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scrolling</title>
    <style>
        .scroll-container {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }
        .scroll-item {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
    </div>
</body>
</html>

JavaScript辅助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scrolling with JS</title>
    <style>
        .scroll-container {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }
        .scroll-item {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="scroll-container" id="scrollContainer">
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
    </div>
    <script>
        const container = document.getElementById('scrollContainer');
        let isDown = false;
        let startX;
        let scrollLeft;

        container.addEventListener('mousedown', (e) => {
            isDown = true;
            startX = e.pageX - container.offsetLeft;
            scrollLeft = container.scrollLeft;
        });

        container.addEventListener('mouseleave', () => {
            isDown = false;
        });

        container.addEventListener('mouseup', () => {
            isDown = false;
        });

        container.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - container.offsetLeft;
            const walk = (x - startX) * 3; // scroll-fast
            container.scrollLeft = scrollLeft - walk;
        });
    </script>
</body>
</html>

参考链接

常见问题及解决方法

滚动不流畅：
- 原因：可能是由于浏览器渲染性能问题或者JavaScript事件处理不当。
- 解决方法：优化JavaScript代码，减少不必要的计算和DOM操作；使用CSS的will-change属性来提示浏览器提前优化。

触摸滑动不响应：
- 原因：可能是没有正确处理触摸事件。
- 解决方法：添加触摸事件监听器，如touchstart、touchmove和touchend，并相应地处理滑动逻辑。
内容超出视口不显示滚动条：
- 原因：可能是CSS属性设置不当。
- 解决方法：确保父容器设置了overflow-x: auto或overflow-x: scroll，并且子元素的总宽度超过了父容器的宽度。