CSS隐藏滚动条并可以滚动内容

隐藏滚动条常用方法

   .container::-webkit-scrollbar {display:none}

为了兼容其他的浏览器，可以用这样的方法：

在滚动区域外再套一层div，给这层div设置overflow: hidden，即可隐藏滚动条

//给container外层加一个div（container-wrapper）.container-wrapper{overflow: hidden}

可是，经过我的测试，这个方法虽然兼容了其他的浏览器，但是移动端我发现用微信打开这个页面，依旧存在一个很丑的默认样式的滚动条。

这种情况下，可以给container设置一个padding-bottom（根据滚动条的位置来设置，我的container是overflow-x: scroll），把滚动条挤出可视范围，这样在视觉上相当于把滚动条隐藏起来了

.container{overflow-x: scroll;overflow-y: hidden;/*解决ios上滑动不流畅*/-webkit-overflow-scrolling: touch;padding-bottom: 25px;
}

CSS隐藏滚动条并可以滚动内容相关推荐

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

CSS隐藏滚动条并可以滚动内容

CSS隐藏滚动条并可以滚动内容相关推荐

最新文章

热门文章