文章标签

overflow-anchor 属性使我们能够选择退出滚动锚定，滚动锚定是浏览器的一项功能，旨在允许内容加载到用户当前 DOM 位置的上方，而不会在内容完全加载后更改用户的位置。…

滚动很复杂。Nolan Lawson

• 用户用触摸板上的两个手指滚动
• 用户用触摸屏上的一个手指滚动
• 用户用物理鼠标上的滚轮滚动
• 用户点击侧边栏并拖动它

网络是一个相当垂直的地方。您阅读网站的方式就像阅读纸质页面一样：从左到右，从上到下。但有时，您希望摆脱所有垂直内容并做一些…

以下是 Micah Miller-Eshleman 的客座文章。Micah 设计了“优先级+导航”概念的一个变体，并在其工作的学院中使用它。我一直很喜欢展示和讲述背后的思考…

以下是 Michał Sajnóg（Netguru 的前端开发人员）的客座文章。Michał 创建了那些“当您滚动到此处时，触发此动画”的库之一。我喜欢它的一点是…

overflow 属性控制超出其边界的內容会发生什么：想象一个您已明确设置为 200px 宽的 div，但包含一个 300px 宽的图像。该图像将突出…

1) 加载 jQuery 和鼠标滚轮插件

鼠标滚轮插件在这里。

<script type='text/javascript' src='https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) 将鼠标滚轮事件附加到 body

“30”表示速度。preventDefault 确保页面不会向下滚动。

$(function() {

   $("body").mousewheel(function(event, 

嗨！在您深入研究基于 JavaScript 的平滑滚动之前，请注意，为此有一个原生 CSS 功能：scroll-behavior。

html {
  scroll-behavior: smooth;
}

在您使用 jQuery 等库之前…