在我们深入探索技术新领域的过程中，总会碰到一些意想不到的惊喜，这些新发现挑战着我们原有的认知，并为我们的开发工作开辟了新天地。最近，在审视我所负责的项目时，我注意到了一个小小的但极为关键的改变，这让我不得不重新思考我对于CSS滚动条样式的理解，并深刻感受到了技术进步带来的乐趣。

这个问题起初很简单：我的滚动条与团队其他成员设计的UI风格显得格格不入。经过仔细比较和研究后，我意识到了问题所在——scrollbar-color和scrollbar-width这两个CSS属性。在我经常使用的Chrome浏览器中，这些属性以前是不支持的。但是，随着Chrome浏览器更新到121版本，情况发生了翻天覆地的变化。

大家好，我是大澈！

尽管微软即将从 EdgeHTML 跳反至 Google Chromium，但好在 Mozilla Firefox 仍在坚持“做自己”，并持续为用户带来体验上的改进。近日，Firefox 每夜构建版引入了“滚动锚定”（Scroll Anchoring）功能，以缓解页面持续加载导致的浏览体验变差。Mozilla 指出，当一个页面元素被加载到正在查看的内容之上时，Firefox 可能出现“跳跃”方面的 bug 。

作为对比，早在两年前，谷歌就已经为自家浏览器（从 Chrome 56 开始）引入了滚动锚定功能。Chromium Blog 上的一篇文章表示：该功能可帮助用户获得更流畅的浏览体验。

要在Firefox中单独设置滚动条样式，你可以使用?@-moz-document??规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。

下面是一个例子，演示如何在Firefox中隐藏滚动条：

前序：

CSS本身是一个常用且强大的功能，但是往往很多人在学习的时候会忽视掉其中一些细节的使用，而我们程序员忽视掉一个细节就可能完成不了这道老板出给我们的题目，成为高手的道路也会离我们越来越远，这里我在分享一个我多年来总结下来的一句话-惊喜往往是有准备的人事先预谋的，而不是突然产生的，页面样式好不好看取决于我的知识面有多广

分享2种方法实现CSS如何隐藏滚动条，同时仍然可以在任何元素上滚动？我们经常在前端开发中遇到这种情况，

让我们面对现实吧，可怕的“滚动离开”时刻——当用户点击模式时，整个页面却继续向下滚动，这种尴尬的情况！这会打乱流程，让用户感到沮丧，并带来不太好的体验。

但不要害怕，各位小伙伴！为了防止这种常见的网站烦恼比您想象的要容易。以下是4种久经考验的方法，每种方法都有自己的优点和缺点：

CSS 禁止浏览器滚动条的方法(转)

1、完全隐藏 在<boby>里加入scroll="no", 可隐藏滚动条；

<boby scroll="no">

这个我用的时候完全没效果, 不知道是什么原因! 不过好多人说这么用可以, 大概是用的位置不一样吧

css章节，本文仅列出笔者任务相对重要的知识点，且介绍上，针对重点。当然，遗漏很正常，希望能收到你的意见。

1.盒子模型

盒子模型，个人的理解，就是一个来装html标签的容器,包装的内容包括content+padding+border+margin。由这四个组成我们的"盒子"。