左右滑动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，并且子元素的总宽度超过了父容器的宽度。

通过以上方法，可以有效地实现和优化左右滑动效果。

页面内容是否对你有帮助？

有帮助

没帮助

将CSS转换-定时功能转换为滑动

、、、、

我在一个带有自定义定时函数()的div (使用CSS转换)中衰落。计时功能基本上是一个更极端的版本‘轻松’。.in { transition-timing-function: cubic-bezier(1, 0, 1, 1);除此之外，我希望能够通过在屏幕上滑动来淡入我使用以下Jquery根据用户滑动的程度设置不透明度： $(document).on('touchmove', functionanim

浏览 0提问于2018-06-22得票数 1

回答已采纳

2回答

我需要Vaadin导航控制与两个箭头在左边和右边像传递的链接

、

我的问题是哪个控件在此链接上可见哪个是用来导航的(屏幕左侧和右侧的左右箭头按钮，你可以按下它们来改变中间的内容，或者像这样的东西默认在vaadin中不存在，而这是在jquery中存在的?)

浏览 1提问于2013-12-20得票数 0

2回答

左右滑动效果

、、

下面是我的CSS代码： float: left;} float: left; height

浏览 1提问于2010-08-31得票数 0

2回答

在移动中可滚动时，V-触摸无法工作。

、、、、

我正在使用vue-js2.0和，以便在移动设备上进行滑动。startsFrom7="show7"></AgendaBlock> </div> 如果我在内部div中评论overflow:auto，我的滑动函数可以正常工作如果我取消评论，滚动工作，但滑动不起作用。为了避免这个问题，我尝试了许多方法，使滚动可能使用容器div，但它也没有工作。怎么啦？该怎么办呢？ps:滚动非常好

浏览 9提问于2017-05-03得票数 1

1回答

一键切换幻灯片div向右和向左

、、

我需要一个按钮来左右滑动div。>Button</div> if($("#nav").css

浏览 1提问于2015-09-24得票数 2

1回答

获取滑动方向和速度jQTouch jQuery

、、

}); $('#gallery').css('margin-left',parseInt($('#gallery').css('margin-left'))-100 );这是非常基本的，当我滑动画廊时，它会改变画廊的边距理想情况下，我

浏览 0提问于2010-07-28得票数 0

回答已采纳

1回答

页面元素滑动

、

如何才能使此元素在缩放时不左右滑动？我正在使用的CSS：.shipping {position:relative; top:100px; right:-1000px;}

浏览 0提问于2011-06-20得票数 0

回答已采纳

1回答

如何在触摸屏drupal中使用jCarousel与swipe事件？

在我的项目中，我使用jCarousel模块和视图幻灯片模块来测试我用移动设备测试的items.When，我看到了导航方面的问题。我不能很好地滚动。因此，我想为这个问题添加一些脚本，我已经添加了一些脚本为我的视图SLide显示从这个网站(https://gist.github.com/eristoddle/5011106)。幸运的是，它在View中工作得很好，但是它不适用于jCarousel。我需要知道哪个脚本适合我的问题。请告诉我我能做什么？谢谢你的进阶。

浏览 0提问于2014-01-28得票数 2

1回答