超出div大小，溢出内容，出现滚动条，隐藏方式记录下

最新推荐文章于 2024-02-26 14:16:49 发布

ckyblack

最新推荐文章于 2024-02-26 14:16:49 发布

阅读量1.2k

点赞数

分类专栏：学习记录用文章标签： css

本文链接：https://blog.csdn.net/ckyblack/article/details/108659963

版权

记录同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

用

24 篇文章 0 订阅

订阅专栏

学习

9 篇文章 0 订阅

订阅专栏

1、横条隐藏，可滚动

套父容器div，高度小于子div,以达到隐藏的效果

竖向隐藏同理：如果是移动端请使用下面这段代码

// webkit 内核的浏览器才可以使用！
#app::-webkit-scrollbar{
       width:0px;
       opacity:0;
       -webkit-overflow-scrolling: touch;
   }

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

			/* webkit 内核的浏览器才可以使用！  */
		    /* .parent::-webkit-scrollbar {
				display: none;
			} */
            /*最外层只需要高度小于子层的高度正好等于滚动条的高就可以了 */
			.parent{
				width: 200px;
				height: 10px;
				border: 1px solid #0000FF;
				padding-bottom: 20px;
				overflow: hidden;
			}
            /*设置窗口大小，出现横向滚动条 */
			.content{
				width: 200px;
				height: 50px;
				overflow-x:auto;/*主要*/
				overflow-y:hidden;/*主要*/
				
			}
            /*设置内容展示宽高*/
			.cont {
				width: 400px;
				height: 50px;
				margin-top: -10px;
				border: 1px solid #000000;
			}
			ul li {
				width: 50px;
				height: 20px;
				display: inline-block;
				vertical-align: middle;
				margin-top: -10px;
			}
		
		</style>
	</head>

	<body>
			<div class="parent" >
				<div class="content">
					<ul class="cont">
						<li>
							<p>怕</p>
						</li>
						<li>
							<p>太怕</p>
						</li>
						<li>
							<p>太可怕</p>
						</li>
						<li>
							<p>不太可怕</p>
						</li>
						<li>
							<p>真是太可怕了</p>
						</li>
						<li>
							<p>哇，是太可怕了</p>
						</li>
					</ul>
				</div>
			</div>
		
			
	</body>

</html>

ckyblack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超出div大小，溢出内容，出现滚动条，隐藏方式记录下

1、横条隐藏，可滚动套父容器div，高度小于子div,以达到隐藏的效果竖向隐藏同理：如果是移动端请使用下面这段代码// webkit 内核的浏览器才可以使用！#app::-webkit-scrollbar{ width:0px; opacity:0; -webkit-overflow-scrolling: touch; }<!DOCTYPE html><html> <head> &...
复制链接

扫一扫