隐藏浏览器滚动条，但只对webkit内核浏览器中有效(Chrome,Safari)

最新推荐文章于 2023-01-06 12:04:53 发布

转载最新推荐文章于 2023-01-06 12:04:53 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shimily/articles/8257210.html

本文介绍了一种在WebKit内核浏览器（如Chrome、Safari）中实现隐藏滚动条的方法，同时保持页面可滚动的功能。该方法可通过JavaScript实现滚动条在用户鼠标静止一段时间后的渐隐效果。

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

目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效，依旧可以滚动。你可以在JS里面写判定当用户鼠标不动一定时间然后消失。我对JS不是特别了解(只能看懂和修改JS代码的程度的能力，但是无论任何JS代码都敢修改的程度)，这效果能做出来的，我就不贴具体代码了。不需要嵌套，纯原生。将来浏览器会支持这个效果的。

转载于:https://www.cnblogs.com/shimily/articles/8257210.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

badiu_30394251

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)

m0_74823683的博客

12-11

599

浏览器默认的滚动条样式简单醒目，而且不同的浏览器下滚动条的样式也不一样，为了美观和统一必须修改滚动条的样式。从滚动条效率和兼容性上选择，可以直接在默认滚动条的基础上进行样式修改。现已有更多相关详细设置的文章、本标题内容仅作概述及引用不再赘述，如对本标题内容已有了解可直接跳转标题2 “webkit更新支持” 至本文正文。等 (以-webkit-内核为主的 Chrome等主流浏览器)-moz-内核的 Firefox火狐浏览器)Can I usescrollbar为保留自定义滚动条效果、不可同时混用。

隐藏浏览器上的滚动条

04-27

然后，我们使用伪元素`::-webkit-scrollbar`来针对Webkit内核的浏览器隐藏滚动条，将其宽度设置为0。如果想要在隐藏滚动条的同时保持页面的可滚动性，可以使用JavaScript库如`perfect-scrollbar`或`simplebar`。...

参与评论您还未登录，请先登录后发表或查看评论

使样式只在webkit内核生效

weixin_30576859的博客

10-16

315

@media screen and (-webkit-min-device-pixel-ratio:0){ 　　.do someting{ 　　} } 使用媒体查询，制定样式转载于:https://www.cnblogs.com/xcbz/p/9796588.html

完美解决 IOS系统safari5.0 浏览器页面布局滚动条问题

xiaoshengjinbu的博客

01-07

1017

style="-webkit-overflow-scrolling:touch;overflow:auto;"

safari苹果不支持修改滚动条

lookBackward的博客

02-28

2286

在用element UI el-table时想修改滚动条样式，发现chrome可以修改，但是safari不生效。后台发现可以曲线救国。element-UI有个隐藏的标签：<el-scrollbar>。上代码： <el-scrollbar> <div style="width: 740px"> <el-table></el...

隐藏浏览器自带滚动条方法

yuxuanbeibei的专栏

09-28

3265

有时候，无论内容是否超出都不显示，我们需要隐藏浏览器的默认滚动条

隐藏浏览器滚动条

weixin_40023424的博客

07-11

1498

.noScrollBar { -ms-overflow-style:none; &::-webkit-scrollBar{display:none;} &::-ms-scrollBar{display:none;} &:-ms-scrollBar{display:none;} &::-o-scrollBar{display:none;} &a...

CSS自定义WebKit内核浏览器滚动条实现代码

09-25

传统的浏览器滚动条通常是浏览器自身提供的默认样式，但随着Web标准的发展，特别是CSS的进步，开发者现在可以使用CSS来自定义WebKit内核浏览器（例如Chrome和Safari）的滚动条样式，而不必依赖于非标准的扩展或...

纯CSS改变webkit内核浏览器的滚动条样式

09-22

特别是对于基于Webkit内核的浏览器（例如Chrome、Safari等），它们提供了丰富的CSS伪元素，允许开发者对滚动条进行高度定制。以下将详细介绍如何使用纯CSS来改变基于Webkit内核浏览器的滚动条样式。首先，Webkit...

CSS3改变浏览器滚动条样式

11-21

在CSS3中，我们可以通过特定的伪类选择器来改变基于`-webkit-`内核浏览器（如Chrome、Safari）的滚动条样式，以解决滚动条过于宽大或不美观的问题，提升网页的整体视觉效果。以下是关于如何自定义滚动条样式的详细...

webbrowser滚动条隐藏

10-29

webbrowser滚动条隐藏

去掉WebBrowser的边框和滚动条

08-30

老问题，新解法：关于去掉WebBrowser的边框和滚动条 连接点+SetUIHander方法关键代码

谷歌浏览器内核Cef js代码整理(二) 滚动条

xtfnpgy

06-13

1988

滚动条是否滚动到底部？是，返回true;否,返回当前垂直滚动条位置。function getScrollTop(){　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;　　if(document.body){　　　　bodyScrollTop = document.body.scrollTop;　　}　　if(document...

chrome,firefox,safari,firefox,ie隐藏滚动条

atdxsu988111的博客

08-05

526

.content { //ie /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ scrollbar-width: none;}//chrome,opera,safari .content::-webkit-scrollbar { display:none} 转载于:ht...

cef chromium scrollbar--google浏览器框架自定义滚动条

寂寞的秋叶

11-19

1万+

关于cef的介绍我就不说了，给个链接： https://code.google.com/p/chromiumembedded/ 在进行自定义浏览器开发时，滚动条是一个很关键的问题，自带的滚动条是乳白色的，很可能和UI设计的效果图不相符，这就需要我们自己做修改。方法一隐藏原有滚动条：最开始我想用directUI去画一个，然后利用WM_MOVEWHEEL消息来响应，但前提是隐藏原有滚动

使用CSS隐藏元素滚动条【兼容主流浏览器】