html 滚动条导致字体模糊，求zhu
隐藏滚动条后，字体清晰
<style>
::-webkit-scrollbar {
display: none; /** 隐藏滚动条 */
}
</style>
</head>
<body>
<div>
<div style="width: 100%;height: 120%;background-color: #ffffff;border-radius: 10px;">
<p>测试</p>
</div>
</div>
</body>
取消隐藏滚动条，字体模糊了，用的是element框架
分享
上午好☀️☀️☀️️
本答案参考ChatGPT-3.5
这个问题主要是因为CSS3的滚动条样式（::-webkit-scrollbar）在Chrome和Safari中没有生效。要解决这个问题，你可以使用JavaScript或者jQuery来处理滚动条事件，并改变字体大小。
以下是两种解决方案：
使用JavaScript处理滚动条事件并改变字体大小
首先，你需要在HTML文件的<body>标签上添加一个JavaScript文件（例如：script.js），并在其中编写以下代码：
window.addEventListener('scroll', function() {
var scrollHeight = document.documentElement.scrollHeight;
var scrollTop = document.documentElement.scrollTop;
if (scrollTop > 10 && scrollHeight - scrollTop < 40) {
// 滚动条已经到达底部，设置字体大小为正常大小
document.body.style.fontSize = '2em';
} else if (scrollTop <= 0 && scrollHeight - scrollTop >= 40) {
// 如果滚动条不在顶部，将字体大小设置为原来的一半
document.body.style.fontSize = '1em';
}
});
然后，在<style>标签中去掉::-webkit-scrollbar的选择器：
/* 原来的样式 */
::-webkit-scrollbar {
display: none;/** 隐藏滚动条 */
}
/* 新的样式 */
::-webkit-scrollbar {
display: block; /* 设置滚动条样式 */
}
这样，滚动条就不再影响页面的字体清晰度，而是被隐藏起来。同时，由于CSS3的滚动条样式已被更改，网页元素的其他样式也会自动更新以适应新的布局方式。
使用jQuery隐藏滚动条
如果你更喜欢使用jQuery，你也可以使用它来代替JavaScript。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐藏滚动条</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<div style="width: 100%;height: 120%;background-color: #ffffff;border-radius: 10px;">
<p>测试</p>
</div>
</div>
</body>
</html>
在这段代码中，我们使用jQuery的scroll()函数来监听滚动事件，并调用一个匿名函数来改变页面的字体大小。请注意，我们需要在HTML文件的<body>标签上添加一个jQuery脚本文件（例如：script.js），并在其中编写相同的代码。
分享
创建了问题
10月14日