scrollbar样式（解决不生效）

最新推荐文章于 2023-11-02 20:41:04 发布
最新推荐文章于 2023-11-02 20:41:04 发布
阅读量5k 收藏 1
点赞数 3
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48369262/article/details/131589671
版权
文章讨论了在CSS中尝试设置::-webkit-scrollbar的width和height但未生效的问题。提到了轨道和滑块的样式定义，包括背景色、边框半径和内阴影，但可能由于缺少width和height属性导致样式未按预期显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//最重要！！！没有设置width和height，咋弄都不生效
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
 
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0px solid transparent;
}
//轨道
::-webkit-scrollbar-track {
  //box-shadow: 1px 1px 1px #132465 inset;
  background: #435FAC;
  border-radius: 0;
}
//滑块
::-webkit-scrollbar-thumb {
  min-height: 10px;
  background-clip: content-box;
  border-radius: 999px;
  background: #22315C;
  //box-shadow: 0 0 0 1px #132465 inset;
}
 
::-webkit-scrollbar-corner {
  background: transparent;
}

根据需要修改 

CSS滚动条原理与自定义样式指南，CSS滚动条样式失效，滚动条样式无效，-webkit-scrollbar无效，overflow不显示滚动条
csdn1940879828的博客
02-20 1470
CSS滚动条样式失效、滚动条不显示、滚动条位置错误、-webkit-scrollbar无效、overflow不显示滚动条、Mac滚动条消失、滚动容器高度设置、嵌套滚动条异常、滚动条浏览器兼容、自定义滚动条hover效果、滚动条挤压内容、滚动条隐藏但可滚动、移动端滚动条优化、滚动条抖动修复、scrollbar-color不生效
利用 ElementUI 的 ＜el-scrollbar＞＜/el-scrollbar＞ 解决div高度百分比时滚动条不生效的问题
Jacy_Lee_LDF的博客
08-13 6564
<el-scrollbar></el-scrollbar> 这个组件在ElementUI 的官方组件文档里面是没有提到的（百度发现的），也可以直接使用的，解决了困扰我很多天的问题，简单写了个例子，留着以后可能还用得着： html代码：（我的是vue项目） <div class="div1"> <div class="test1"> 这里是test1 div的内容（此div可有可无）这里不一定是div，也可以是其他的标签内容 ..
CSS属性-webkit-scrollbar-track失效
m0_59352724的博客
06-13 1493
否则单独设置::-webkit-scrollbar-track、::-webkit-scrollbar-thumb等属性时没有效果的。设置 滑动条相关样式时，一定要设置-wibkit-scrollbar的width，如图。
CSS3自定义滚动条样式 -webkit-scrollbar
sweetyhyh的博客
04-20 2331
lang="en">     charset="UTF-8">   CSS3自定义滚动条     header   {   font-family: 'Lobster', cursive;   text-align: center;   font-size: 25px;  
明明写了webkit-scrollbar-thumb却没有任何效果
qq_21936241的博客
06-02 2560
2.::-webkit-scrollbar的width必须设置，否则是0看不到。背景什么的可以不设置。1.height和overflow必须设置，overflow可以是auto，也可以是scroll。3.#.iyy::-webkit-scrollbar-thumb 这个的背景色必须设置。问题关键：比如想给id=iyy的dom设置自定义效果,这几项是必须要写的。
body中设置-webkit-scrollbar竖向滚动条，在手机浏览器上无效
angou6476的博客
12-18 1364
暂时无解，如果是chrome的PC模式，滚动条是没有的，但如果是手机模式，滚动条会出现，且无法设置其样式，滚完后会自动消失。 如果设置div这些块元素，完全没问题。 转载于:https://www.cnblogs.com/EasonJim/p/6194125.html...
css 滚动条不起作用
Littlegirlha的博客
11-02 1083
是因为滚动条的外面可能还有滚动条，overflow 可能不是visible. 所以滚动条还是放在外层好。实在不行外层的overflow也要改。滚动条可以正确展示，不能使用。
设置滚动条样式的代码为什么不起作用？
faunjoe的专栏
07-23 2568
Dreamweaver里有一个设置:把不安全的带码安全的过滤掉,所以,从2004开始就会有每个页面的第一个代码""就是起过滤作用的,你把那句代码删掉就可以运行啦!
CSS 设置 DIV 滚动不生效
空晓天
01-07 7526
CSS 设置 DIV 滚动不生效 记录日常开发中遇到的 css 问题 如果设置了 overflow 没有效果，可能是没有设置宽度和高度 如果设置了 overflow-y 没有效果，可能是没有设置高度 如果设置了 overflow-x 没有效果，可能是没有设置宽度 ......
CSS横向滚动条失效，依旧换行如何解决？父级overflow-x: scroll；display:子级inline-black；
weixin_42220130的博客
01-07 2773
父级用overflow-x:scroll; 子级用display: inline-black; 子极超过父级的宽度之后，并没有的到左右滑动效果，而是另起一行，那么我们可以给父级写一个属性禁止它的子级自动换行 white-space: nowrap;//禁止换行 ...
vue 父子组件设置 scoped， 如何导致滚动条失效的
m0_37616866的博客
01-06 1568
vue 父子组件设置 scoped， 如何导致滚动条失效的
element ui 修改滚动条样式不生效
weixin_42659644的博客
08-06 1358
CSS之设置滚动条样式
以爱护甲,爱满枫林。
03-17 288
文章目录 一：webkit下面的CSS设置滚动条 二：IE下面的CSS设置滚动条 因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： 下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面...
关于滑动条修改样式不生效只有display:none才生效
JAsonji的博客
09-10 2665
只有display：none才生效 解决方法：给::-webkit-scrollbar添加宽度属性 然后后面的会生效 scrollbar-button无法隐藏 解决方法：去掉webkit &::scrollbar-button{ display: none; } 具体为什么，我也不知道 ...
el-scrollbar解决固定表头出现样式问题
斜杠青年博客
06-11 1093
1.普通添加滚动条 <!-- html --> <div class="box"> <el-scrollbar> <div v-for="item in 100">{{item}}</div> </el-scrollbar> </div> // css .box{ height: 200px; // 最外层要设置盖度，才能限制它出滚动条呀 } .el-scrollbar{ h
CSS -webkit-scrollbar 搭配flex时，滚动条显示两个翻页按钮
japlus的博客
06-27 550
CSS -webkit-scrollbar 搭配flex时，滚动条按钮会显示两个
CSS自定义滚动条样式
perny的专栏
05-22 1107
相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。 IE下的滚动条样式:示例 scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color;
前端开发中的一些小问题
留白声的博客
06-09 1275
1、移动端的点击事件中，点击后会闪烁或者闪一下有背景颜色的图层： 解决方法：在点击事件的元素中添加如下css代码：-webkit-tap-highlight-color:transparent; 2、文字过长显示省略号： width: 740px; /* 内容过长显示成省略号（内容显示为一行） */ white-space: nowrap;/设置不换行/ overflow: hidden; /设置隐藏/ text-overflow: ellipsis; /设置隐藏部分为省略号/ 3、隐藏滚动条和设置样式：
el-scrollbar 滚动事件不生效
最新发布
01-15
### 解决 `el-scrollbar` 滚动事件不生效的问题 当遇到 `el-scrollbar` 组件无法响应鼠标滚轮的情况时，可能的原因在于组件内部默认阻止了某些浏览器原生行为。为了使滚动条能够正常响应鼠标的滚轮操作，可以通过自定义监听器来处理这一情况。 #### 方法一：绑定原生事件监听器 可以在挂载阶段为容器添加一个全局的 mousewheel 或 DOMMouseScroll 事件监听器： ```javascript mounted() { this.$refs.scrollbarWrapper.addEventListener(&#39;mousewheel&#39;, this.handleScroll, { passive: false }); this.$refs.scrollbarWrapper.addEventListener(&#39;DOMMouseScroll&#39;, this.handleScroll, { passive: false }); // Firefox兼容 }, beforeDestroy() { this.$refs.scrollbarWrapper.removeEventListener(&#39;mousewheel&#39;, this.handleScroll); this.$refs.scrollbarWrapper.removeEventListener(&#39;DOMMouseScroll&#39;, this.handleScroll); // Firefox兼容 } ``` 其中 handleScroll 函数用于实际处理滚动逻辑[^1]。 #### 方法二：配置 Element Plus 的属性设置 如果使用的是较新版本的 Element Plus 库，则可以直接调整 `el-scrollbar` 的 props 属性中的 `native` 参数设为 true 来启用原生滚动支持: ```html <template> <el-scrollbar ref="scrollContainer" :native="true"> <!-- 子元素 --> </el-scrollbar> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; const scrollContainer = ref(null); // ...其他代码... </script> ``` 这会使得 `el-scrollbar` 使用浏览器自带而非模拟的方式创建滚动条，从而确保所有标准交互方式都能正常使用。 #### 方法三：CSS 调整 有时样式上的冲突也会导致此现象的发生。确认是否有 CSS 样式影响到了 `.el-scrollbar__wrap` 和其子节点的高度计算以及 overflow 设置。适当修改这些样式的值可能会解决问题。 ```css .el-scrollbar .el-scrollbar__wrap { margin-bottom: -20px !important; /* 防止底部空白 */ } /* 如果存在固定高度需求 */ .el-scrollbar__wrap, .el-scrollbar__view { height: auto; max-height: calc(100vh - 80px); /* 自适应视窗大小减去顶部导航栏等占用空间 */ } ``` 以上三种方法可以根据具体应用场景组合运用以达到最佳效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值