html 滚动条滚动过快会留下边框线

滚动条滚动过快时,会留下边框线

但其实大部分时候是这样的,没有多出边框线的

滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行为有关。这种问题可能出现在使用了自定义滚动条样式的情况下。

注意:使用方法 6 好使,其它只是做记录

1. 使用CSS的::-webkit-scrollbar伪元素

如果你使用的是WebKit浏览器(如Chrome, Safari等),可以通过CSS的::-webkit-scrollbar伪元素来定义滚动条的样式。确保在定义滚动条样式时包括了足够的宽度或高度,这样滚动时就不会因为样式缺失而留下边框线。

复制代码
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

验证了 width 设置更大值管用,但我的 width 不能改,这个放弃

2. 确保滚动容器有适当的overflow属性

复制代码
.scroll-container {
    overflow-y: auto; /* 仅在必要时显示垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    max-height: 200px; /* 设置最大高度以触发滚动 */
}

验证不管用。

3. 使用JavaScript动态调整滚动条宽度

没有必要增加负担

5. 使用CSS的scroll-behavior属性

如果你希望改善用户的滚动体验,可以使用scroll-behavior属性使滚动更加平滑:

复制代码
.scroll-container {
    scroll-behavior: smooth;
}

验证不管用。

6. 使用CSS的 transform 属性

对于动画和滚动效果,可以使用transformopacity等属性,这些属性可以触发GPU加速。

复制代码
.element {
  transform: translateZ(0);
}

验证好用。但是有一个问题就是 父元素使用transform会使子元素和伪元素的z-index失效

所以子元素里用 dialog 会出问题。

解决办法:可以将 dialog 单独拿出来别放在 transform 的子元素里。

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript