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 的子元素里。

相关推荐
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀4 小时前
html初学者第一天
前端·html
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽9 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头9 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全10 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing10 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆10 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试