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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/news/908524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】Ubuntu 创建应用图标的方式汇总,deb/appimage/通用方法

Ubuntu 创建应用图标的方式汇总,deb/appimage/通用方法 对于标准的 Ubuntu(使用 GNOME 桌面),desktop 后缀的桌面图标文件主要保存在以下三个路径: 当前用户的桌面目录(这是最常见的位置)。所…

【自然语言处理】大模型时代的数据标注(主动学习)

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构D 实验设计E 个人总结 A 论文出处 论文题目:FreeAL: Towards Human-Free Active Learning in the Era of Large Language Models发表情况:2023-EMNLP作者单位:浙江大…

【论文解读】DeepSeek-R1

文章目录 概览一、DeepSeek-R1-Zero:在 Base Model 上直接进行 RL(一)强化学习算法(二)奖励模型(三)数据构造(四)DeepSeek-R1-Zero 的性能、自我进化过程和 Aha Moment1.…

巴西医疗巨头尤迈Kafka数据泄露事件的全过程分析与AI安防策略分析

一、事件背景与主体信息 涉事主体:Unimed,全球最大医疗合作社,巴西医疗行业龙头企业,拥有约1500万客户。技术背景:泄露源于其未保护的Kafka实例(开源实时数据传输平台),用于客户与聊天机器人“Sara”及医生的实时通信。二、时间线梳理 时间节点关键事件描述2025年3月24…

软信天成:数据驱动型背后的人工智能,基于机器学习的数据管理

在数字化转型浪潮中,当代企业如同逆水行舟,不进则退。无数企业希望通过数字化转型捕获全新的市场机遇,改善财政状况,在未来市场竞争中占据一席之地。要想获得成功的数字化转型,关键因素在于具备可靠、及时的数据用以支…

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…

【Java学习笔记】StringBuilder类(重点)

StringBuilder(重点) 1. 基本介绍 是一个可变的字符串序列。该类提供一个与 StringBuffer 兼容的 API,但不保证同步(StringBuilder 不是线程安全的) 该类被设计用作 StringBuffer 的一个简易替换,用在字符…

计算机网络 | 1.2 计算机网络体系结构与参考模型

计算机网络体系结构与参考模型 目录 计算机网络体系结构与参考模型 【思维导图】 1、计算机的分层结构 1、为什么要分层? 2、什么是计算机网络体系结构 2、计算机网络协议、接口和服务 1)协议: 2)接口: 3…

微软的新系统Windows12未来有哪些新特性

在今年即将到来的重大设计升级中,苹果计划对其全线操作系统统一按年份命名,作为另一巨头微软的win12还远吗?win11和win10是微软现在正在用的主流版本,win11系统发布于2021年6月24日,win10系统发布于2015年7月29日。预计win12尝鲜版可能在2025年下半年或明年。 尽管win12还…

制造业数智化卡在知识断层?R²AIN SUITE AI知识管理打通关键经络

在一家工厂里,工程师正面临棘手难题——某机器异常振动的处理方案。他的笔记本记录着三年前类似案例的解决方案,但翻查半小时仍未找到关键参数。与此同时,工厂的碳排放监控系统显示,因设备停机导致的额外能源损耗已使产线碳强度有…

构造数列中的常见变形总结

前情概要 针对高考中构造数列的常见变形做一总结,便于梳理思路,提升思维。 类型Ⅰ: 形如 a n + 1 = p ⋅ a n + q a_{n+1}=p\cdot a_n+q an+1​=p⋅an​+q, p , q p,q p,q为常数,即 a n + 1 = f ( a n ) a_{n+1}=f(a_n) an+1​=f(an​),构造变形方向: 其一: a n…

全国县域统计年鉴PDF-Excel电子版-2022年

全国县域统计年鉴PDF-Excel电子版-2022年.ziphttps://download.csdn.net/download/2401_84585615/89784662 https://download.csdn.net/download/2401_84585615/89784662 《中国县域统计年鉴》是一部全面反映中国县域社会经济发展状况的资料性年鉴。自2014年起,该年…

81 实战一:给root目录扩容

添加一块100G硬盘 vgextend centos /dev/sdb1 /dev/sdc lvextend -L +120G /dev/centos/root xfs_growfs /dev/centos/root df -h 看是否扩容成功 82 实战二:给swap空间扩容 添加一块20G硬盘 fdisk -l 可以看到新添加的硬盘 vgextend centos /dev/sdd …

实现购物车微信小程序

实现一个微信小程序购物车页面,包含以下功能: 需求说明: 商品列表:显示商品名称、价格、数量加减按钮,支持修改商品数量(数量≥1)。 全选 / 反选功能:顶部 “全选” 复选框&#…

R语言使用随机过采样(Random Oversampling)平衡数据集

随机过采样(Random Oversampling)是一种用于平衡数据集的技术,常用于机器学习中处理类别不平衡问题。当某个类别的样本数量远少于其他类别时(例如二分类中的正负样本比例悬殊),模型可能会偏向多数类&#x…

【力扣】2434.使用机器人打印字典序最小的字符串

1、题目描述: 2、测试用例: 3、解题思路 每次删除字符串s的第一个字符,可以将s看做队列,每次从头部出。在t的尾端插入或删除,可以将t看做栈栈顶元素出栈条件:①比即将入栈的元素小并且比s中剩下的还没有入…

业务材料——半导体行业MES系统核心功能工业协议AI赋能

一、前置概念 半导体行业 半导体行业主要生产基于半导体材料(如硅、锗、化合物半导体等)的电子元器件及相关产品,广泛应用于计算、通信、能源、医疗等领域。 MES系统 MES系统(Manufacturing Execution System,制造…

视频的分片上传,断点上传

​ 上传功能的实现,点击上传按钮,判断添加的文件是否符合要求,如果符合把他放入文件列表中,并把他的状态设置为等待中,对于每个文件,把他们切分为chunksize大小的文件片段,再检查他的状态是否为…

指针的定义与使用

1.指针的定义和使用 int point1(){//定义指针int a 10;//指针定义语法&#xff1a; 数据类型 * 指针变量名int * p;cout << "sizeof (int(*)) --> " << sizeof(p) << endl;//让指针记录变量a的地址 & 取址符p &a ;cout << &qu…

Git开发实战

本文对开发中git的常用概念和操作做一个总结。参考绿毛鸭子的部分内容。 git分布式的体现 1.本地完整的版本库&#xff1a; 每个克隆下来的 Git 仓库都包含了项目的所有历史记录、提交、分支等信息。这意味着每个开发者的本地仓库是一个完整的版本控制系统&#xff0c;包括…