body中设置-webkit-scrollbar竖向滚动条，在手机浏览器上无效

最新推荐文章于 2025-02-20 14:55:20 发布
最新推荐文章于 2025-02-20 14:55:20 发布
阅读量782 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/589510
本文讨论了在Chrome浏览器中，无论是PC模式还是手机模式下，滚动条的表现差异及样式设置限制。指出在PC模式下滚动条不可见，在手机模式下虽然可见但无法自定义样式。

暂时无解，如果是chrome的PC模式，滚动条是没有的，但如果是手机模式，滚动条会出现，且无法设置其样式，滚完后会自动消失。

如果设置div这些块元素，完全没问题。

==>如有问题，请联系我：easonjim#163.com，或者下方发表评论。<==
Scrollbar浏览器滚动条样式美化-知识点-案例
JackieDYH的博客
07-21 2674
滚动条样式一 /* 样式一 */ /*滚动条整体样式 body:: 只给body加样式 ::给全部*/ ::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } /*滚动条里面小方块*/ ::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:
CSS属性-webkit-scrollbar-track失效
m0_59352724的博客
06-13 1542
否则单独设置::-webkit-scrollbar-track、::-webkit-scrollbar-thumb等属性时没有效果的。设置 滑动条相关样式时，一定要设置-wibkit-scrollbar的width，如图。
scrollbar样式（解决不生效）
新手必备
07-07 5417
【代码】scrollbar样式（解决不生效）
明明写了webkit-scrollbar-thumb却没有任何效果
qq_21936241的博客
06-02 2673
2.::-webkit-scrollbar的width必须设置，否则是0看不到。背景什么的可以不设置。1.height和overflow必须设置，overflow可以是auto，也可以是scroll。3.#.iyy::-webkit-scrollbar-thumb 这个的背景色必须设置。问题关键：比如想给id=iyy的dom设置自定义效果,这几项是必须要写的。
浏览器显示滚动条手机端不显示滚动条解决方式
qq_28464121的博客
01-19 9930
<!-- 重写滚动条样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按
CSS滚动条原理与自定义样式指南，CSS滚动条样式失效，滚动条样式无效，-webkit-scrollbar无效，overflow不显示滚动条
最新发布
csdn1940879828的博客
02-20 1622
CSS滚动条样式失效、滚动条不显示、滚动条位置错误、-webkit-scrollbar无效、overflow不显示滚动条、Mac滚动条消失、滚动容器高度设置、嵌套滚动条异常、滚动条浏览器兼容、自定义滚动条hover效果、滚动条挤压内容、滚动条隐藏但可滚动、移动端滚动条优化、滚动条抖动修复、scrollbar-color不生效
使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)
m0_74823683的博客
12-11 507
浏览器默认的滚动条样式简单醒目，而且不同的浏览器下滚动条的样式也不一样，为了美观和统一必须修改滚动条的样式。从滚动条效率和兼容性上选择，可以直接在默认滚动条的基础上进行样式修改。现已有更多相关详细设置的文章、本标题内容仅作概述及引用 不再赘述，如对本标题内容已有了解可直接跳转标题2 “webkit更新支持” 至本文正文。等 (以-webkit-内核为主的 Chrome等主流浏览器)-moz-内核的 Firefox火狐浏览器)Can I usescrollbar为保留自定义滚动条效果、不可同时混用。
-webkit-scrollbar-thumb怎么设置右侧的上下滚动条和左右的滚动条
01-04
为了使网页中的滚动条更加美观并符合设计需求，可以利用 `::-webkit-scrollbar-thumb` 来调整滚动条滑块部分的颜色、形状和其他视觉属性。此伪类适用于 WebKit 浏览器内核下的 Chrome 和 Safari。 #### 垂直滚动条...
element-ui的el-scrollbar修改滚动条样式 但是目前在chrome浏览器中 ::webkit-scrollbar不生效
12-31
### 解决 `element-ui` 中 `el-scrollbar` 组件在 Chrome 浏览器里自定义滚动条样式无效的问题 对于 `element-ui` 的 `el-scrollbar` 组件，在 Chrome 浏览器中如果发现自定义滚动条样式的设置不起作用，可以尝试...
ios微信浏览器-div设置滚动-不出现滚动条的解决办法
一叶扁舟
02-14 6690
.scrolldiv{ height: 85%; overflow: hidden; overflow-y: scroll; } .scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF; border-left: 1px solid #FFF; } .scrolldiv::-webkit-scrollbar {
uniapp scroll-view滚动条不显示及IOS中问题
細水、長流√的专栏
02-27 4639
最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。
CSS3自定义滚动条样式 -webkit-scrollbar
difeiwa4698的博客
06-02 341
::-webkit-scrollbar {/*隐藏滚轮*/display: none;} 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示 来看看这2个滚动条demo：demo1（图片版）、demo2（纯CSS3版） 滚动条组成 ::-w...
vue 父子组件设置 scoped， 如何导致滚动条失效的
m0_37616866的博客
01-06 1593
vue 父子组件设置 scoped， 如何导致滚动条失效的
-webkit-tap-highlight-color 属性 及 active伪类在手机端无效
chris_cuc的博客
10-16 1584
先说说-webkit-tap-highlight-color 这个属性，他是一个  不规范的属性 （unsupported Webkit property）, 他没有出现在CSS规范草案中。 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透
手机端滚动条不生效，但是显示的问题
weixin_43368335的博客
11-25 1453
手机端滚动条不生效，但是显示的问题 第一种 如果使用的是element的table 并且使用了固定列，可能原因是使用了固定列，且固定列挡住了滚动条，固不生效 解决： .el-table__fixed { height:auto !important; bottom:17px; } //可根据实际情况进行修改 或者不使用固定列 第二种 注意css 是否有关于设置 * { touch-action:pan-y; } 如果有，请..
滚动条样式修改
热门推荐
孑立
09-02 1万+
滚动条样式
自定义滚动条样式：前端实现跨浏览器兼容
interest_ing_的博客
04-14 2329
滚动条不仅是用户与网页交互的重要元素，也是网页美观性的一个细节体现。在前端开发中，自定义滚动条样式可以提升用户体验，使网页更加个性化。本文将介绍如何在前端设置滚轮滚动条样式，并确保兼容各大主流浏览器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值