CSS - 实现横向滚动（横向滚动布局）

前言

横向滚动需求很常见，实现起来也很容易。

如下图所示，PC 端是用鼠标拖动滚动条，H5 移动端是手指滑动：

解决方案

上述效果图的完整代码如下，一键复制运行起来即可。

核心三要素：

父元素设置 width: 100%，横向滚动 overflow-x: scroll
父元素不换行 white-space: nowrap
子元素设置为行内块级元素 display: inline-block

<section class="content"><div class="item">充数内容</div><div class="item">充数内容</div><!-- 自行复制上面的充数内容(让容器溢出即可) -->
</section>

.content {background: rgb(196, 196, 196);width: 100%;overflow: hidden;overflow-x: auto;white-space: nowrap;
}
.item {display: inline-block;background: #fff;margin: 10px;width: 100px;height: 100px;
}

SEO

CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。

CSS - 实现横向滚动（横向滚动布局）相关推荐

html左右超出,css 横向超出滚动使用flex布局
描述横向超出滚动一般使用display:inline-block布局,元素里面东西比较多,想使用flex布局怎么办?可以使用下面的方法使用 Document .box { width: 700p ...
css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇
(自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇移动端和pc端通用效果截图: 实例代码: <!DOCTYPE html> <html><head> ...
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)
自己搜的代码,亲测好使,可以根据自己的需要进行样式及js修改 <!doctype html> <html> <head><meta charset=" ...
android横向自动滚动列表,android横向循环自动滚动
项目需要实现GridView横向循环自动滚动 1.先看布局 android:layout_width="fill_parent" android:layout_height=&qu ...
项目场景-------滚动条横向竖向同步滚动
项目场景之滚动条横向竖向同步滚动 1. 项目场景: 提示:项目上有个自动化数据比对工具需要在视图进行滚动条双向监听滚动: 2. 属性描述: 提示:涉及到几个属性值需要了解: // 垂直滚动条// sc ...
[css] 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？
[css] 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性? 全屏滚动和轮播图类似,都是通过改变元素位置或者显示与隐藏来实现,配合JS的一些交互距离判断,实现类似原生滚动捕获的效果.这里全屏的 ...
[css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...

CSS - 实现横向滚动（横向滚动布局）

前言

解决方案

SEO

CSS - 实现横向滚动（横向滚动布局）相关推荐

最新文章

热门文章