【前端大概一分钟】css隐藏滚动条同时可以滚动

1. 通过 `::-webkit-scrollbar` 伪元素

.inner-container::-webkit-scrollbar {display: none;
}
复制代码

简单粗暴，但是兼容性不好

2. 外层元素 `overflow: hidden` 内层元素`absolute`定位

// css 样式
<style>.element, .outer-container {width: 200px;height: 200px;}.outer-container {position: relative;overflow: hidden;}.inner-container {position: absolute;overflow-x: hidden;overflow-y: scroll;}
</style>
// html 结构
<div class="outer-container"><div class="inner-container"><div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</div></div>
</div>
复制代码

兼容性较好，绝对布局不用计算滚动条宽度

3. 父元素`overflow: hidden`, 子元素宽度 `100% + 滚动条宽度`

// css 样式
<style>.parent {width: 200px;overflow: hidden;}.child {height: 200px;width: calc(100% + 17px);overflow: auto;}
</style>
// html 结构
<div class="parent"><div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div>
复制代码

兼容性好，但是需要计算滚动条的宽度

参考
CSS 实现隐藏滚动条同时又可以滚动
CSS 隐藏滚动条，兼容ie和chrome

【前端大概一分钟】css隐藏滚动条同时可以滚动相关推荐

css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
CSS隐藏滚动条，保留滚动功能
CSS隐藏滚动条,保留滚动功能原理:设置父级为溢出隐藏,而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面. 设置父级overflow:hidden;是为了使父级溢出隐藏.再设置子级的 ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...
html+ul隐藏滚动条,2种方法实现CSS隐藏滚动条并可以滚动内容的方法
方法1:计算滚动条宽度并隐藏起来 html代码: Loremipsumdolorsitamet,consecteturadipiscingelit.Integervehiculaquamnibh,eu ...
css 隐藏滚动条但是可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS实现隐藏滚动条并保留滚动功能
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...

【前端大概一分钟】css隐藏滚动条同时可以滚动

1. 通过 `::-webkit-scrollbar` 伪元素

2. 外层元素 `overflow: hidden` 内层元素`absolute`定位

3. 父元素`overflow: hidden`, 子元素宽度 `100% + 滚动条宽度`

【前端大概一分钟】css隐藏滚动条同时可以滚动相关推荐

最新文章

热门文章

【前端大概一分钟】css隐藏滚动条同时可以滚动

1. 通过 ::-webkit-scrollbar 伪元素

2. 外层元素 overflow: hidden 内层元素absolute定位

3. 父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

【前端大概一分钟】css隐藏滚动条同时可以滚动相关推荐

最新文章

热门文章

1. 通过 `::-webkit-scrollbar` 伪元素

2. 外层元素 `overflow: hidden` 内层元素`absolute`定位

3. 父元素`overflow: hidden`, 子元素宽度 `100% + 滚动条宽度`