视讯游戏提供最新游戏下载和手游攻略!

滑向未来(现代 JS 和 CSS 滚动指南)滚动条太短怎么设置

发布时间:2024-07-04浏览:0

英文:Evil Martians 翻译:中成翻译/sea_ljf

本文将揭开一些(网站)滚动效果的神秘面纱,这些效果非常迷人,但您不知道如何实现它们。我们将根据最新的技术和规范向您介绍最新的 JavaScript 和 CSS 功能,这些功能将使您的页面滚动更流畅、更美观、性能更高(当您将其付诸实践时)。

大多数网页无法将所有内容都放在一屏中,因此滚动对于用户来说至关重要。对于前端工程师和 UX 设计师来说,在满足设计要求的同时提供跨浏览器的良好滚动体验是一项挑战。尽管 Web 标准的发展速度比以前快得多,但代码实现往往落后。下面将介绍一些有关滚动的常见案例。检查你使用的解决方案是否已被更优雅的解决方案所取代。

消失的滚动条

在过去的三十年里,滚动条的外观一直在随着设计潮流而变化,设计师们尝试了各种颜色、阴影、上下箭头的形状以及边框的圆角。以下是它在 Windows 上的变化:

(Windows 上的滚动条)

2011年,苹果设计师从iOS中汲取灵感,为如何定义“美观”的滚动条定下了方向。滚动条全部从Mac电脑上消失,不再占据任何页面空间,只有用户触发滚动时才会重新出现(部分用户会设置滚动条不隐藏)。

(Mac 上的滚动条)

滚动条的悄然消失并未引起果粉们的不满,习惯了 iPhone 和 iPad 滚动方式的用户也很快习惯了这种设计。大部分开发者和设计师都认为这是“好消息”,因为计算滚动条的宽度是一件很麻烦的事。

然而,我们生活在一个拥有众多操作系统和浏览器的世界,它们都有不同的实现方式。如果你和我们一样是一名网页开发者,你就不能忽视“滚动条问题”。

这里有一些技巧可以让您的用户获得更好的滚动体验。

隐藏但可滚动

让我们看一个模态框的经典示例。打开时,主页应该停止滚动。在 CSS 中有一个快捷方式可以实现此目的:

身体{

溢出:隐藏;

但是上述代码会带来一些不良的副作用:

(请留意红色剪刀)

在此示例中,出于演示目的,我们将滚动条设置为强制出现在 Mac 系统上,以便用户体验与 Windows 用户的体验类似。

那我们该如何解决这个问题呢?如果我们知道滚动条的宽度,那么我们可以在每次模态框出现的时候,在主页面的右侧设置一点边距。

由于不同的操作系统和浏览器滚动条宽度不同,所以获取它的宽度并不容易。在 Mac 上,无论哪个浏览器(滚动条)统一都是 15px,但 Windows 却可以让开发者抓狂:

(“百花齐放”的宽度)

注意,以上只是基于 Windows 下最新浏览器的结果,之前的版本可能有所不同,而且谁也不知道将来滚动条宽度会如何变化。

不用去猜测(滚动条的宽度),你可以通过 JavaScript 来计算它的宽度(译者注:下面的代码只能测出原始宽度,通过 CSS 改变滚动条宽度后,下面的代码无法测出实际的宽度):

constouter = document.createElement('div');

constinner = document.createElement('div');

outer.style.overflow='滚动';

文档.body.appendChild(外部);

外部.appendChild(内部);

滚动条宽度=外部偏移宽度-内部偏移宽度;

文档.body.移除子元素(外部);

尽管只有七行代码(用于测量滚动条宽度),但其中几行都在操作 DOM。(出于性能原因)在没有必要的情况下会避免 DOM 操作。

解决这个问题的另一种方法是在模态框出现时保留滚动条,下面是基于这个思想的纯CSS实现:

html{

溢出-y:滚动;

虽然解决了“模态框晃动”的问题,但是无功能的滚动条却影响了整体美观,无疑是设计上的一个败笔。

我们认为,更好的解决方案是完全隐藏滚动条。这可以仅使用 CSS 来实现。此方法与 macOS 并不完全相同,因为滚动时滚动条不可见。滚动条始终不可见,但页面可以滚动。对于 Chrome、Safari 和 Opera,请使用以下 CSS:

.container::-webkit-滚动条{

显示:无;

对于 IE 或 Edge,您可以使用以下代码:

。容器{

-ms-溢出样式:无;

至于 Firefox,不幸的是,没有办法隐藏滚动条。

正如你所见,没有灵丹妙药。每个解决方案都有其优点和缺点,你应该根据项目需求选择最合适的解决方案。

外观争议

必须承认,滚动条在某些操作系统上的外观并不好看。有些设计师喜欢完全控制自己(设计)应用程序的风格,不放过任何细节。GitHub 上有数百个库使用 JavaScript 替换系统滚动条的默认实现,以实现定制效果。

但是如果你想为现有的浏览器定制滚动条怎么办?(不幸的是)没有通用的API,每个浏览器都有自己独特的代码实现。

虽然IE5.5以后的浏览器允许修改滚动条样式,但是只允许修改滚动条颜色,下面是重绘拖动部分和箭头代码:

身体{

滚动条面颜色:蓝色;

但仅仅改变颜色对于提升用户体验帮助并不大,基于此,WebKit 开发者在 2009 年提出了解决方案(修改滚动条)样式,下面是在支持相关样式的浏览器中使用 -webkit 前缀模拟 macOS 滚动条样式的代码:

::-webkit-滚动条{

宽度:8px;

::-webkit-滚动条-拇指{

背景颜色:#c1c1c1;

边框半径:4px;

滚动条长度怎么设置_滚动条宽度_滚动条太短怎么设置

Chrome、Safari、Opera,甚至 UC 浏览器或三星自己的桌面浏览器都支持它。Edge 也有计划实现它。但三年过去了,该计划仍处于中等优先级(尚未实施)。

当我们谈论滚动条定制时,Mozilla 基金会基本忽略了设计师(开发者)的需求。17 年前就有人提出过修改滚动条样式的请求。而就在几个月前,Jeff Griffiths(Firefox 浏览器总监)终于回答了这个问题:

“除非团队中有人对此感兴趣,否则我根本不在乎。”

公平地说,站在 W3C 的角度,虽然 WebKit 的实现得到了广泛的支持,但它仍然不是一个标准。现有的修改滚动条样式的草案是基于 IE 的:只能修改其颜色。

随着支持像 WebKit 一样修改滚动条样式的 issue 的提交,争议还在继续。如果你想影响 CSS 工作组,是时候参与进来了。也许这不是优先级最高的 issue,但标准化之后(像 WebKit 一样修改滚动条样式),将让很多前端工程师和设计师的工作轻松很多。

流畅的操作体验

滚动最常见的任务是登录页面的导航(跳转)。通常,它是通过锚链接完成的。您只需要知道元素的 id:

部分

点击链接会跳转到区块(对应锚点),(然而)UX 设计师一般坚持这个过程应该是平滑的。GitHub 上有很多造轮子(帮你解决这个问题),但都或多或少用到了 JavaScript。(其实)只需要一行代码就能实现同样的效果。最近,DOM API 中的 Element.scrollIntoView() 可以通过传入一个配置对象来实现平滑滚动:

elem.scrollIntoView({

行为:'平滑'

});

但是此属性兼容性较差,并且仍然使用脚本。如果可能,请尽量少使用附加脚本。

幸运的是,有一个全新的 CSS 属性(仍处于工作草案中),可以用简单的一行代码改变整个页面的滚动行为。

html{

滚动行为:平滑;

结果如下:

(从一个块跳转到另一个块)

(流畅滚动)

您可以在 codepen 上尝试使用此属性。在撰写本文时,scroll-behavior 仅在 Chrome、Firefox 和 Opera 中受支持,但我们希望它能得到广泛支持,因为使用 CSS(而不是 JavaScript)解决页面滚动问题更加优雅,并且符合“渐进增强”模型。

粘性 CSS

另一个常见的要求是根据滚动方向动态锚定元素,即著名的“粘性”效果。

(粘性元素)

过去,要制作“粘性”元素,需要编写复杂的滚动处理程序来计算元素的大小。该函数难以处理元素“粘性”和“不粘性”之间的轻微延迟,这通常会导致抖动。通过 JavaScript 实现(粘性元素)也存在性能问题,尤其是在调用 [Element.getBoundingClientRect()] 时。

前不久,CSS实现了position:sticky属性,我们只需要指定一个偏移量(在某个方向上)就可以达到我们想要的效果。

。元素{

位置:粘性;

顶部:50px;

剩下的就交给浏览器来实现吧。你可以在 codepen 上尝试一下。在撰写本文时,position: sticky 在所有浏览器(包括移动浏览器)中都得到了很好的支持,因此如果你仍在使用 JavaScript 来解决这个问题,那么是时候切换到纯 CSS 了。

综合使用函数节流

从浏览器的角度来看,滚动是一个事件,因此在 JavaScript 中使用标准化的事件监听器 addEventListener 来处理它:

window.addEventListener('滚动',()=>{

窗口滚动顶部=窗口滚动Y;

/* 使用 scrollTop 做一些事情 */

});

用户倾向于以较高的频率滚动(页面),但如果滚动事件触发过于频繁,则会引起性能问题。 您可以使用函数节流技术进行优化。

window.addEventListener('滚动',油门(()=>{

窗口滚动顶部=窗口滚动Y;

/* 使用 scrollTop 做一些事情 */

}));

需要定义一个节流函数来包装原有的事件监听函数,减少包装函数的执行次数,只允许在固定的时间间隔内执行一次:

函数节流阀(动作,等待=1000){

让时间 = Date.now();

返回函数(){

如果((时间+等待日期.now()){

行动();

是否正在运行=false;

});

当然你也可以用现有的开源轮子来实现,比如Lodash,你可以访问codepen查看上述方案和Lodash中_.throttle的区别。

使用哪一个并不重要,重要的是在必要时优化滚动处理功能。

在窗口中显示

当你需要实现图片的延迟加载或者无限滚动时,你需要判断元素是否出现在窗口中。这可以在事件监听器中处理。最常见的解决方案是使用 element.getBoundingClientRect():

window.addEventListener('滚动',()=>{

constrect=elem.getBoundingClientRect();

const inViewport = rect.bottom>0&&rect.right>0&&

矩形左

热点资讯