浏览器滑动条设置

最新推荐文章于 2023-04-13 21:00:00 发布

Ying_Mr

最新推荐文章于 2023-04-13 21:00:00 发布

阅读量930

点赞数

分类专栏： html+css 文章标签： css scrollbar

本文链接：https://blog.csdn.net/weixin_39371152/article/details/103365188

版权

本文介绍了如何使用CSS选择器来定制webkit浏览器的滚动条样式，包括滚动条的各个部分，如滑块、轨道、按钮等。通过`::-webkit-scrollbar`等伪元素选择器，可以实现对滚动条的全面控制，创建独特的用户体验。并提供了MDN和CSDN的相关参考链接以供深入学习。

摘要由CSDN通过智能技术生成

CSS浏览器滚动条设置

CSS滚动条选择器

可以使用以下伪元素选择器修改webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

案例

<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ying_Mr

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue修改浏览器滑动条样式_如何自定义CSS滚动条的样式？

weixin_29061821的博客

12-24

822

修改滚动条样式

dengkecou4635的博客

04-09

155

/*滚动条样式*/::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ background: #e5e5e5; -webkit-border-radius: 15px; ...

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

谷歌浏览器—滑屏操作

ST的博客

07-24

2312

暂时还未找到兼容所有浏览器滑屏的代码，这里贴出在谷歌没问题的滑屏代码（亲测有效），有知道兼容大部分浏览器的大神可以指点指点我，不胜感激！ js = "var q = document.documentElement.scrollTop = 30000" # 滑屏到底部 self.driver.execute_script(js) time.sleep(2) js = "var q = do...

css之-webkit-scrollbar

weixin_34315485的博客

12-30

207

在IE中可以自定义滚动条的样式，基于webkit的浏览器现在也可以自定义其样式： ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webk...

Jquery 获取屏幕及滑块及元素的高度及距离

weixin_30237281的博客

08-31

151

alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的...

CSS3自定义滚动条样式 -webkit-scrollbar

wushijuewu

02-18

230

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo：demo1（图片版）、demo2（纯CSS3版）滚动条组成 ::-webkit-scr..

js判断横竖屏及禁止浏览器滑动条示例

10-26

本文档通过一个JavaScript代码示例，介绍了如何判断设备的屏幕方向，并在屏幕方向改变时进行相应的处理，同时也展示了如何禁止浏览器的默认滑动行为。首先，涉及到的关键技术点之一是JavaScript中的`window....

jquery写的滑动条,代替原浏览器难看的滑动条

12-04

原生浏览器的滑动条样式可能不符合设计师的审美需求，或者不能提供足够的自定义功能。针对这种情况，jQuery 提供了一种解决方案，允许开发者创建自定义的滑动条，以提供更美观且功能丰富的用户体验。 jQuery 是一个...

CSS自定义滚动条样式

weixin_30677475的博客

12-07

113

转自：http://www.yiyifly.com/blog/ 下面是代码:html {overflow: auto;}body {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow-y: scroll;overflow-x: hidden;} /*滚动条宽度*/::-webkit-scrollbar {width: 8p...

图片滑动浏览--兼容各手机浏览器

08-12

添加Touch事件处理，支持手机触控设备的滑动浏览导航。如果去掉导航，可以实现强制图片浏览，直到最后一页输入表单信息。简单版请查找“图片滑动浏览--鼠标版”

webkit浏览器自定义滚动条样式代码

u010261238的博客

01-26

194

webkit浏览器自定义滚动条样式代码 /滚动条宽度/ ::-webkit-scrollbar { width: 8px; } /* 轨道样式 */ ::-webkit-scrollbar-track { } /* Handle样式 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.2); } ...

滚动条如何设置样式和滚动条悬浮显示与隐藏

weixin_44784401的博客

04-13

1万+

滚动条如何设置样式和滚动条悬浮显示与隐藏

设置浏览器滚动条样式

蓦然回首，那人却在，灯火阑珊处。

01-12

352

设置滚动条样式

谷歌浏览器滚动条样式设置

u011705317的专栏

06-24

8303

/*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ background-color:#018EE8; height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:4px;

修改浏览器滚动条样式(兼容IE)

热门推荐

黄河爱浪的博客-专注CSS,jQuery,uni-app领域

10-30

3万+

通常为了满足页面整体的风格的情况下，需要修改滚动条的颜色，各大视频网站都是以添加自定义滚动条的方式来满足，其实也可以理解，毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条的地方，通过自定义的方式显然不是个好办法。修改浏览器滚动条样式，请看下面的源码：源码对每个属性都有详细的解释，并附有个人的释义助于更好的理解 <!DOCTYPE html> &...

自定义浏览器滚动条的样式，详细讲解

唐策的博客

11-02

1万+

前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不仅仅只用Chrome，其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果，若有错误或不全，请在评论里

如何让浏览器的滚动条消失但是还能滚动

lzh657083979的博客

10-15

3620

第一种方式：在css样式中添加这个，意思是让浏览器的所有滚动条消失在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义 ::-webkit-scrollbar{ display:none; }第二种方法：在其他浏览器里可以设置父容器宽度为100%，子容器宽度为100%+18px 这样滚动条处于视窗可视范围外，算是个投机取巧的办法。转自知乎大神@王潇

css 设置横向滑动条宽度