时间戳

首页 > 解决方案 > 阻止使用 css / js 向上滚动超过某个 div

javascript - 阻止使用 css / js 向上滚动超过某个 div

问题描述

我试图弄清楚如何限制访问者向上滚动以停止在 div2，而不是网页顶部。

该网页有几个主要部分：

<div1>tease</div>
<div2>hero</div>
<div3>info</div>
<div4>specs</div>
<div5>prices</div>
<footer></footer>

div1纯粹是为了让访问者好奇的营销预告片，他们只需要看到一次。理想情况下，我们希望能够在访问者沿着页面向下移动到div3. 然后当他们向上滚动时，页面停止，顶部的英雄，好像挑逗不存在。

我们尝试在向下滚动时简单地隐藏 div，但这会导致页面以巨大的内容偏移重绘（挑逗填充了 100% 的视口高度，并具有最大高度值）。这种 UI 转变是不可取的。触发隐藏页脚底部的 div 将避免重绘移位，但大多数访问者不会一直滚动到页脚底部。

我们研究了使用 css 动画来缓慢降低 的高度div1，但由于重绘，它再次使 UI 生涩。

我正在寻找一种使用 css 和 javascript 执行此操作的方法。不想为一种营销技巧加载 jQuery。谢谢。

标签： javascripthtmlcss

解决方案

我们通过使英雄图像（div 2）具有粘性并向信息（div 3）添加上边距来解决这个难题。

通过使英雄图像具有粘性，它在到达视口顶部时冻结，因此不会受到关闭挑逗（div 1）引起的重绘的影响。我们使用 InterectionObserver 观察 div 3 到达视口并触发 div 1 的关闭并向 div 3 添加上边距。

  // close tease and push div 3 down to avoid content jump
  const target = $('div3');
  function handleIntersection(entries) {
    entries.map((entry) => {
      if (entry.isIntersecting) {
        $('div1').style.display = 'none';
        $('div3').style.marginTop = '100vh';
      } else { }
    });
  }
  const observer = new IntersectionObserver(handleIntersection);
  observer.observe(target);

如果有人在他们的浏览器上观看滚动条，他们会注意到它在重绘期间移动，但视口中的信息保持静止。

我们决定通过 js 添加上边距，因为我们不希望网页上出现巨大的空白，以供少数可能禁用 javascript 的访问者使用。

推荐阅读