CSS实现横向滚动

3 292 2021-03-22 23:11:35

很多时候，客户需要展示图片，但又不希望图片占据太多空间，此时我们可以给客户做轮播图。如果不想做轮播图，也可以通过CSS实现让用户手动滑动图片实现横向滚动的效果。

CSS实现横向滚动CSS教程

1、html部分

<div class="scroll">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">X</div>
	<div class="item">XI</div>
</div>

2、CSS部分

.scroll {
	text-align: center;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}
.item {
	width: 100px;
	height: 50px;
	white-space: nowrap;
	display: inline-block;
}

这样，我们就用css实现了横向滚动的效果。

注：
上方源码有部分是样式，可酌情删减。

本文地址：https://xzo.com.cn/develop/js/738.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

CSS

单行滑动

CSS实现横向滚动 css清除浮动导致布局错乱的3个方法 css3 循环滚动动画demo 一段常用的css文件base.css CSS3动画：鼠标上移后顶部线条向两侧展开 CSS3动画：鼠标上移后颜色从中间向两边填充帝国cms怎样将过期下架产品设为灰色 css实现单行滑动并隐藏滚动条弹性盒子布局全解（多图）怎样用css3让多行文字垂直居中于父元素？ CSS3 鼠标上移后底部线条从中间向两边展开 CSS3弹性盒子常用属性介绍 css变量函数 var() html5标签picture：自动加载不同尺寸的图片 CSS3 长方形切掉右下角（不规则五边形）相对路径和绝对路径要如何选择？ animate.css在线调试，支持直接复制样式名帝国cms按钮怎样做高光划过的CSS3动画效果？ css3计数器函数counter() Mac下配置sublime里的sass编译

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

js判断windows操作系统还是mac os系统

js网站视频播放器ckplayer和dplayer优缺点分析

Vue在npm run serve时报错Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be pr

推荐JS/JQuery开发教程

JS验证手机是否11位的做法 在网站表单提交前，我们往往需要验证一下信息避免错误数据，那么，怎样验证手机号...: 1 373

jquery怎样获取textarea用户输入的行数？ jQuery是一个相当好用的js插件，通过jquery我们可以实现很多功能，例如今天要介...: 0 497

Superslide响应式页面直接应用手机端技巧介绍 如果是响应式网站，那么用superslide做轮播图需要做两个，这无疑是非常不方便的...: 1 425

$(window).height() 和 $(document).height()有什么不同？ 我们常用$(window).height() 和 $(document).height()来监听当前高度，但这个...: 1 335

JS控制输入字数的两个方案 我们在文章输入框中经常有用到字数控制，但字数控制有两种方案，一种是字母/空...: 0 348

js点击追加信息到textarea 通过灵活运用js，我们可以轻松实现点击追加相关信息到textarea的功能。这个功...: 0 529

js判断windows操作系统还是mac os系统 网站日常访客主要是windows和mac os两种操作系统，如果网站提供资源下载，则需...: 0 1648

js网站视频播放器ckplayer和dplayer优缺点分析 dplayer和ckplayer都是非常流行的web视频播放器，二者都占有相当大的用户市场...: 0 1476

推荐插件

帝国cms百度文字识别ocr接口对接插件 许多网站会做一些小功能小插件给客户使用以增强用户黏性，比如图片转文字，这种...: 0 380

帝国cms多栏目多数据表自动审核推送插件 本插件基于帝国cms帝国cms每日自动审核插件，在自动审核指定条数信息的基础上...: 0 804

帝国cms在线考试系统模板插件 一直没看到好用的帝国cms在线考试插件，所以自己开发了一款。在线考试插件用...: 0 1183

帝国cms智能自动审核按星期几审核指定栏目带推送插件 采集站的必备资源是自动审核，要做到日收录也离不开定时发布。而本插件的自动...: 0 1154

帝国cms自动生成文章新闻目录插件下载 用户体验是我们的需求，百度蜘蛛的认可更是我们的需求。毕竟，没有收录排名，何来...: 0 988

帝国cms联想词搜索高级搜索插件下载 帝国CMS自带的搜索功能虽然强大，但也有很强的局限性 -- 必须关键词完全匹配...: 0 633

帝国cms网站会员登录与退出历史记录日志插件 帝国cms默认只有上次登录时间与ip，没有一个记录清单，所以今天，我们分享这个帝...: 0 284

帝国cms访问统计ip地址链接与封禁插件下载 下载鸥开发了这款帝国cms封禁ip插件，自动记录访问情况，让我们可以更快的识别...: 0 897