css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

时间: 2017-11-27阅读: 1217标签: 滚动

通过css方法隐藏滚动条,目前只支持webkit内核的浏览器,当然如果是移动开发,基本都是兼容移动端的浏览器的(基本都是webkit内核的)。

html:

<div class="demo">
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

css:

.demo{
	width: 50px;height: 50px;background: #F0AD4E;
	overflow: auto;
}
::-webkit-scrollbar{
    display:none;
}

核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0,如下:

::-webkit-scrollbar{
	width:0px;
}

上面代码是针对所有的滚动条,如果只针对当前demo。css样式应该写为:.demo::-webkit-scrollbar{display:none;}。如果要考虑兼容性,可以结合js来实现隐藏滚动条。


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/176

页面平滑滚动小技巧

今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

90行代码,15个元素实现无限滚动

在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看

完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

js中scroll滚动

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。这四个属性,全部是只读属性,其中,无非就是分为宽高和左上。两个方向。

js 禁止/允许页面滚动

passive,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时

原生JS实现滚动条

可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度;内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度)

css修改浏览器默认滚动条样式

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码。这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全