CSS隐藏滚动条，保留滚动功能

原理：设置父级为溢出隐藏，而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面。

设置父级overflow:hidden;是为了使父级溢出隐藏。再设置子级的y轴方向可以滚动，然后设置子级的宽度使得滚动条溢出父级元素，达到隐藏滚动条的效果（实际上是滚动条溢出）

示例：

<!-- 设置外层标签的高度小于内层标签的高度，使滚动条出现 -->
<div style="height: 500px; border:solid 2px red; overflow-y:scroll;"><div style="height: 1000px; border:solid 2px blue"><div style="background-color:rebeccapurple">123</div> </div>
</div>

效果：

红色的外层标签，蓝色的内层标签。因为内层标签的高度大于外层且外层设置了overflow:scorll；所以出现了滚动条。那么如何去掉滚动条呢，且保持可以滚动的效果呢？在外层在添加一个标签设置为overflow:hidden;然后调整宽度使子级的宽度右边溢出父级宽度，这样滚动条就被隐藏了，外层添加一个新标签设置overflow:hidden;是因为当子级溢出父级后会出现x轴方向的滚动条这与我们的目的不符。

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏滚动条，保留滚动功能</title><style>.parent{overflow: hidden;}.child{width: 100%;overflow-y:scroll;padding-right: 50px; }</style>
</head>
<body><!-- 设置外层标签的高度小于内层标签的高度，是滚动条出现 --><div class="parent"><div style="height: 500px; border:solid 2px red; overflow-y:scroll;" class="child"><div style="height: 1000px; border:solid 2px blue"><div style="background-color:rebeccapurple">123</div> </div></div></div>
</body>
</html>

效果：

可以看到滚动条不见了且右面的外层标签的边框消失了，这就是隐藏滚动条且保持滚动的原理通过设置父级为超出隐藏，然后让子级超出父级将滚动条隐藏掉。这是基本原理，使用时灵活设置即可。

CSS隐藏滚动条，保留滚动功能相关推荐

隐藏滚动条（滚动功能可用）
外层设置overflow:hidden,需要滚动的容器设置个padding-bottom,当滚动条出现时,就会被外边容易hidden
CSS实现隐藏滚动条并保留滚动功能
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
CSS | 隐藏滚动条，但保持页面依旧能够滚动
原文地址:CSS | 隐藏滚动条,但保持页面依旧能够滚动(永久地址,保存网址不迷路
html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...
如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...
css隐藏滚动条、兼容
css隐藏滚动条 .scrollbar{scrollbar-width: none;-ms-overflow-style: none; } .scrollbar::-webkit-scrollbar ...

CSS隐藏滚动条，保留滚动功能

CSS隐藏滚动条，保留滚动功能

CSS隐藏滚动条，保留滚动功能相关推荐

最新文章

热门文章