css实现单行滑动并隐藏滚动条

0 284 2023-03-03 16:24:11

本文目录

1. 两层父级实现滑动显示
2. 隐藏滚动条

有些时候，我们要对页面上的导航栏进行单行滑动处理，这肯定是没有问题的，但问题在于，可能会出现滚动条影响页面美观。那么，我们要如何处理呢？

两层父级实现滑动显示

<style>
.big{
	width:100%;
	overflow: hidden;
}
.medium{
	width:100%;
	overflow-x:scroll;
	white-space: nowrap;
}
li{
	display: inline-block;
	box-sizing: border-box;
	font-size:24px;
}
</style>
<div class="big">
	<h2>栏目名</h2>
	<ul class="medium">
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
		<li>这是一段文字</li>
	</ul>
</div>

隐藏滚动条

.medium{
	-ms-overflow-style:none; /* Edge */
	scrollbar-width: none; /* Firefox */
}
.medium::-webkit-scrollbar {
	display: none; /* Chrome */
}

这样，我们就实现了单行滑动并隐藏滚动条的效果。

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

有帮助，很赞！

信息来源：下载鸥

业务合作

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

版权声明

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

信息标签

CSS

单行滑动

css3 循环滚动动画demo vue引入css文件的方法英文段落文本怎样对齐？ css变量函数 var() Mac下配置sublime里的sass编译你知道CSS3也可以去除白底吗？ CSS实现横向滚动 css3计数器函数counter() Animate.css bootstrap CSS3动画：鼠标上移后顶部线条向两侧展开帝国cms怎样将过期下架产品设为灰色 html5标签picture：自动加载不同尺寸的图片 CSS3动画：鼠标上移后颜色从中间向两边填充 css清除浮动导致布局错乱的3个方法分享一段jQuery + CSS3小窗口右侧滑入的简单代码一个简单的css+jQuery制作的开关样式 CSS3弹性盒子常用属性介绍 CSS3动画产品上下循环轻微跳动 CSS3之弹性盒子布局flex（文字版）

导出教程下载word版教程

关于前端开发

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怎样做倒计时效果？ 在各种盛大的节日、活动前，网站制作倒计时特效可有效给活动页引流。那么，怎样...: 1 514

JavaScript过滤XSS攻击方法 什么是XSS？XSS（Cross Site Scripting），跨站脚本攻击，是一种允许攻击者在另外一个...: 1 442

jQuery怎样监听鼠标滚动是向上还是向下的状态？ 知乎鼠标向下滚动显示文章标题，向上滚动显示栏目；又或者向下滚动到底部时异步...: 0 622

JS获取当前时间、日期、星期并每秒更新一次 很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...: 0 462

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

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

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

jQuery怎样给图片添加默认域名？ 在很多网站中，图片的默认路径是相对于根目录的绝对路径，如果是其他站点引用，则...: 0 501

推荐插件

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

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

帝国cms百度AI黑白图像上色api接口对接插件 百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...: 0 502

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

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

帝国cms批量添加后台用户插件 使用帝国cms的企业用户、新闻资讯类站点的用户很多，此类站点很多时候需要有...: 0 867

帝国cms百度AI图像去雾api接口对接插件 通过本插件，可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...: 0 517

帝国cms纳米数据接口（足球比赛中最新数据） 帝国cms 对接纳米数据（www.nami.com）接口，本接口主要接收、整理足球比赛实时数...: 0 530