广州网站制作:滚动弹出您的网站

2019.08.13 mf_web

133

滚动弹跳(有时也称为滚动'橡皮筋'或'弹性滚动')通常用于表示滚动到页面顶部或HTML元素时所看到的效果,或者指向底部的在使用触摸屏或触控板的设备上的页面或元素,在元素或页面弹回之前可以看到空白空间并将其自身对齐回顶部/底部(当您松开触摸/手指时)。您可以看到在CSS滚动捕捉元素之间发生类似的效果。

但是,本文将重点介绍滚动到网页顶部或底部时的滚动弹跳。换句话说,当scrollport已到达其滚动边界时。

滚动弹跳的一个很好的理解是非常有用的,因为它将帮助您决定如何构建您的网站以及您希望页面如何滚动。

广州网站制作如果您不希望看到fixed页面上的元素移动,则不希望滚动弹跳。一些示例包括:当您希望将页眉或页脚固定在某个位置时,或者如果您想要修复任何其他元素(如菜单),或者您希望页面在滚动和滚动时的某些位置滚动捕捉您不希望在页面的顶部或底部进行任何其他滚动,这会使访问者感到困惑。本文将针对在网页顶部或底部处理滚动弹跳时遇到的问题提出一些解决方案。

我第一次遇到这种影响

当我更新我很久以前建立的网站时,我首先注意到了这种效果。你可以在这里查看网站。页面底部的页脚应该固定在页面底部的位置,根本不会移动。同时,您应该能够在页面的主要内容中向上和向下滚动。理想情况下,它会像这样工作:

滚动在macOS上的Firefox中弹跳
滚动在macOS上的Firefox中弹跳。(大预览)

它目前在Firefox中或在没有触摸屏或触控板的设备上的任何浏览器上以这种方式工作。但是,当时我在MacBook上使用Chrome。当我发现我的网站无法正常工作时,我使用触控板滚动到页面底部。你可以看到这里发生了什么:

滚动在MacOS上的Chrome中弹跳
滚动在MacOS上的Chrome中弹跳。(大预览)

不好了!这不是应该发生的事情!我通过将其CSS position属性设置为值为,将页脚的位置设置在页面底部fixed。这也是重新审视的好时机position: fixed;。根据CSS 2.1规范,当“盒子”(在这种情况下,深蓝色页脚)被固定时,它“相对于视口固定,滚动时不移动。”这意味着页脚是当你向上和向下滚动页面时不应该移动。当我看到Chrome上发生的事情时,这让我很担心。

为了使本文更加完整,我将向您展示如何在下面的Mobile Edge,Mobile Safari和Desktop Safari上滚动页面。这与在Firefox和Chrome上滚动时发生的情况不同。我希望这能让您更好地理解目前完全相同的代码如何以不同的方式工作。目前,开发在不同Web浏览器中以相同方式工作的滚动是一项挑战。

滚动在macOS上的Safari中弹跳。 iOS上的Edge和Safari也可以看到类似的效果
滚动在macOS上的Safari中弹跳。iOS上的Edge和Safari也可以看到类似的效果。(大预览)

寻找解决方案

我的第一个想法是,在所有浏览器上都可以轻松快捷地解决此问题。这意味着我认为我可以找到一个解决方案,它将需要几行CSS代码并且不会涉及任何JavaScript。因此,我做的第一件事就是尝试实现这一目标。我用于测试的浏览器包括macOS和Windows 10上的Chrome,Firefox和Safari,以及iOS上的Edge和Safari。这些浏览器的版本是撰写本文(2018年)时的最新版本。

HTML和CSS Only解决方案

绝对和相对定位

我尝试过的第一件事就是使用绝对和相对定位来定位页脚,因为我习惯于像这样建立页脚。我的想法是将我的网页设置为100%高度,以便页脚始终位于页面底部,具有固定的高度,而内容占用100%减去页脚的高度,您可以滚动它。或者,您可以设置padding-bottom而不是使用calc并将body-container高度设置为100%,以便应用程序的内容不与页脚重叠。CSS代码看起来像这样:

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;}body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  height: 100%;
  overflow: hidden;}.body-container {
  height: calc(100% - 100px);
  overflow: auto;}.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;}footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;}
复制

该解决方案的工作方式与原始解决方案几乎相同(仅此而已position: fixed;)。与此相比,此解决方案的一个优点是滚动不是针对整个页面,而是针对没有页脚的页面内容。这种方法的最大问题是在Mobile Safari上,页脚和应用程序的内容同时移动。这使得这种方法在快速滚动时非常有问题:

绝对和相对定位
绝对和相对定位。

我不想要的另一个效果起初很难注意到,我只是意识到它是在尝试更多解决方案之后发生的。这是滚动浏览应用程序内容的速度稍慢。因为我们将滚动容器的高度设置为自身的100%,这会阻碍iOS上的基于动画/动量的滚动。如果100%高度较短(例如,当2000px的100%高度变为100%高度900px时),基于动量的滚动变得更糟。当您用手指轻弹触摸屏表面并且页面自动滚动时,会发生轻弹/基于动量的滚动。在我的情况下,我想要基于动量的滚动发生,以便用户可以快速滚动,所以我远离设置高度为100%的解决方案。

其他尝试

网络上建议的解决方案之一,以及我尝试在我的代码上使用的解决方案,如下所示。

html {
  width: 100%;
  position: fixed;
  overflow: hidden;}body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;}.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;}.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;}footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;}
复制

此代码适用于macOS上的Chrome和Firefox,与以前的解决方案相同。此方法的一个优点是滚动不限于100%高度,因此基于动量的滚动可以正常工作。但是,在Safari上,页脚会消失:

在macOS Safari上缺少页脚
在macOS Safari上缺少页脚。(大预览)

在iOS Safari上,页脚变短,底部有一个额外的透明(或白色)间隙。此外,滚动到最底部后,滚动页面的功能也会丢失。您可以在此处看到页脚下方的白色间隙:

iOS Safari上更短的页脚
iOS Safari上更短的页脚。

您可能会看到很多有趣的代码:-webkit-overflow-scrolling: touch;。这背后的想法是它允许给定元素的基于动量的滚动。在MDN文档中,此属性被描述为“非标准”和“不在标准轨道上”。它在Firefox和Chrome中检查时显示为“无效的属性值”,并且它在Desktop Safari上不显示为属性。我最后没有使用这个CSS属性。

为了展示您可能遇到的解决方案的另一个示例以及我发现的不同结果,我还尝试了以下代码:

html {
  position: fixed;
  height: 100%;
  overflow: hidden;}body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;}.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;}footer {
  position: fixed;}
复制

这实际上适用于不同的桌面浏览器,基于动量的滚动仍然有效,页脚固定在底部,不会在桌面Web浏览器上移动。也许这个解决方案中最成问题的部分(以及它的独特之处在于),在iOS Safari上,页脚总是会轻微摇晃和扭曲,每当滚动时你都可以看到它下面的内容。

JavaScript解决方案

在使用HTML和CSS尝试一些初始解决方案之后,我尝试了一些JavaScript解决方案。我想补充一点,这是我不建议你做的事情,最好避免这样做。根据我的经验,通常使用HTML和CSS来提供更优雅和简洁的解决方案。但是,我已经花了很多时间尝试其他解决方案,我认为快速查看是否有一些使用JavaScript的替代解决方案并不会有什么坏处。

触摸事件

一个办法解决滚动弹跳的问题是防止touchmove或touchstart事件上window或document。这背后的想法是阻止整个窗口上的触摸事件,同时允许您想要滚动的内容上的触摸事件。这样的代码示例如下所示:

// Prevents window from moving on touch on older browsers.window.addEventListener('touchmove', function (event) {
  event.preventDefault()}, false)// Allows content to move on touch.document.querySelector('.body-container').addEventListener('touchmove', function (event) {
  event.stopPropagation()}, false)
复制

我尝试了许多此代码的变体,试图让滚动正常工作。预防touchmove上window没有什么区别。使用document没有区别。我也尝试过使用touchstart和touchmove控制滚动,但这两种方法也没有区别。我了解到,event.preventDefault()出于性能原因,你不能再这样说了。您必须在事件侦听器中设置passive选项false:

// Prevents window from moving on touch on newer browsers.window.addEventListener('touchmove', function (event) {
  event.preventDefault()}, {passive: false})
复制

图书馆

你可能会遇到一个名为“iNoBounce”的库,它是为了“阻止你的iOS webapp在滚动时弹跳。”现在使用这个库解决我在本文中描述的问题时需要注意的一点是它需要你使用-webkit-overflow-scrolling。另外需要注意的是,我最终得到的更简洁的解决方案(稍后将对其进行描述)与iOS上的解决方案类似。您可以通过查看其GitHub存储库中的示例并将其与我最终得到的解决方案进行比较来自行测试。

过度行为

在尝试了所有这些解决方案后,我发现了CSS属性overscroll-behavior。该overscroll-behaviorCSS属性是在Chrome 63上实现2017年十二月,并在Firefox 59在2018三月。如MDN文档中所述,此属性 “允许您控制浏览器的滚动溢出行为 - 当达到滚动区域的边界时会发生什么。”这是我最终使用的解决方案。

我所要做的就是设置overscroll-behavior到none在body我的网站,我可以离开页脚的position作为fixed。即使基于动量的滚动应用于整个页面,而不是没有页脚的内容,这个解决方案对我来说足够好,并且在那个时间点满足了我的所有要求,并且我的页脚不再意外地在Chrome上反弹。注意到Edge现在将此属性标记为正在开发中可能很有用。overscroll-behavior如果浏览器还不支持它,可以看作是增强功能。

结论

如果您不希望固定页眉或页脚在网页上反弹,则现在可以使用overscroll-behaviorCSS属性。

尽管此解决方案在不同浏览器中的工作方式不同(在Safari和Edge上仍然会发生页面内容的弹跳,而在Firefox和Chrome上却没有),但当您滚动到顶部时,它将保持页眉或页脚的固定或网站的底部。这是一个简洁的解决方案,在所有测试的浏览器中,基于动量的滚动仍然有效,因此您可以非常快速地滚动浏览大量页面内容。如果要在网页上构建固定的页眉或页脚,则可以开始使用此解决方案。

广州网站制作

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP