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

最新推荐文章于 2023-04-20 11:11:05 发布
最新推荐文章于 2023-04-20 11:11:05 发布
阅读量198 收藏
点赞数
原文链接：http://www.cnblogs.com/shimily/articles/8257210.html
版权

 

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

 

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

 

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

badiu_30394251
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webbrowser滚动条隐藏
10-29
webbrowser滚动条隐藏
使样式只在webkit内核生效
weixin_30576859的博客
10-16 254
@media screen and (-webkit-min-device-pixel-ratio:0){ 　　.do someting{ 　　} } 使用媒体查询，制定样式 转载于:https://www.cnblogs.com/xcbz/p/9796588.html
隐藏浏览器滚动条
weixin_40023424的博客
07-11 1437
.noScrollBar { -ms-overflow-style:none; &::-webkit-scrollBar{display:none;} &::-ms-scrollBar{display:none;} &:-ms-scrollBar{display:none;} &::-o-scrollBar{display:none;} &a...
谷歌浏览器内核Cef js代码整理(二) 滚动条
xtfnpgy
06-13 1846
滚动条是否滚动到底部？是，返回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 470
.content { //ie /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ scrollbar-width: none;}//chrome,opera,safari .content::-webkit-scrollbar { display:none} 转载于:ht...
CSS3改变浏览器滚动条样式
11-21
在CSS3中，我们可以通过特定的伪类选择器来改变基于`-webkit-`内核浏览器（如Chrome、Safari）的滚动条样式，以解决滚动条过于宽大或不美观的问题，提升网页的整体视觉效果。以下是关于如何自定义滚动条样式的详细...
隐藏浏览器上的滚动条
04-27
然后，我们使用伪元素`::-webkit-scrollbar`来针对Webkit内核的浏览器隐藏滚动条，将其宽度设置为0。 如果想要在隐藏滚动条的同时保持页面的可滚动性，可以使用JavaScript库如`perfect-scrollbar`或`simplebar`。...
自定义滚动条（兼容所有浏览器）
07-25
- `::-webkit-scrollbar` 用于选择Webkit内核浏览器（如Chrome和Safari）的滚动条整体。 - `::-webkit-scrollbar-thumb` 选择滚动条上的滑块部分。 - `::-webkit-scrollbar-track` 选择滚动条的轨道部分。 - `::-...
原生js scrollbars滚动条插件设置浏览器竖直滚动条美化
10-31
然而，CSS3的这种方法仅适用于Webkit内核的浏览器，如Chrome和Safari。对于Firefox和其他非Webkit浏览器，我们需要使用JavaScript来实现兼容性。这里可以创建一个简单的JavaScript插件，用于监听滚动事件并动态生成...
cef chromium scrollbar--google浏览器框架自定义滚动条
寂寞的秋叶
11-19 1万+
关于cef的介绍我就不说了，给个链接： https://code.google.com/p/chromiumembedded/ 在进行自定义浏览器开发时，滚动条是一个很关键的问题，自带的滚动条是乳白色的，很可能和UI设计的效果图不相符，这就需要我们自己做修改。 方法一隐藏原有滚动条： 最开始我想用directUI去画一个，然后利用WM_MOVEWHEEL消息来响应，但前提是隐藏原有滚动
去掉WebBrowser的边框和滚动条
08-30
老问题，新解法：关于去掉WebBrowser的边框和滚动条 连接点+SetUIHander方法 关键代码
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的样式，正合我意 代码如下： /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; } /定义滚动条轨道 内阴影+圆角/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
使用CSS隐藏元素滚动条【兼容主流浏览器】
热门推荐
Umbrella_Um的博客
02-26 2万+
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置 overflow：auto 样式即可。想要完全隐藏滚动条只需设置 overflow：hidden 即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。 Firefox浏览器 对于 Firefox ，我们可以将滚动条宽度设置为none： scrollbar-width: none; /*
浏览器滚动条的兼容性问题
标子 的专栏
06-01 6411
通用的属性window.pageXoffset,window.pageYoffset.(ie8以下版本不支持) ie,火狐下: document.body.scrollTop:0 document.documentElement.scrollTop:x chrome: document.body.scrollTop:x document.documentElement.sc
完美解决 IOS系统safari5.0 浏览器页面布局滚动条问题
xiaoshengjinbu的博客
01-07 839
style="-webkit-overflow-scrolling:touch;overflow:auto;"
safari苹果不支持修改滚动条
lookBackward的博客
02-28 2099
在用element UI el-table时想修改滚动条样式，发现chrome可以修改，但是safari不生效。后台发现可以曲线救国。element-UI有个隐藏的标签：<el-scrollbar>。上代码： <el-scrollbar> <div style="width: 740px"> <el-table></el...
隐藏滚动条的多种方式
QIAO_hh的博客
04-20 3274
隐藏滚动条的多种方式
移动端隐藏scroll滚动条::-webkit-scrollbar
jjsnc
06-03 1万+
::-webkit-scrollbar { display: none;/*隐藏滚轮*/ }
浏览器页面滚动条美化（样式）
wang839305939的博客
06-11 4203
浏览器页面滚动条美化（样式） 最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下： 其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改
html 自定义浏览器滚动条的样式，js修改滚动条才能兼容各个浏览器
最新发布
08-09
首先，通过 CSS 的 `::-webkit-scrollbar` 伪类选择器和相关属性，可以自定义 WebKit 内核浏览器（如 Chrome、Safari）的滚动条样式。例如： ```css /* WebKit 内核浏览器 */ ::-webkit-scrollbar { width: 8px; /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值