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

【问题标题】：Block scrolling up past a certain div using css / js阻止使用 css / js 向上滚动超过某个 div
【发布时间】：2021-04-03 13:05:26
【问题描述】：

我试图弄清楚如何限制访问者向上滚动以停止在 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。谢谢。

【问题讨论】：

“挑逗”的 div 是如何定位的？相对地？固定？
所有显示的 div 都是相对定位的。

标签： javascript html css

【解决方案1】：

这样的事情呢？这只是在滚动超过 100vh（窗口内部高度）后将挑逗 div 的高度更改为 0。为挑逗 div 添加一个过渡可以使更改看起来更平滑，并且实际上不会影响动画时的滚动位置，因此没有任何明显的跳跃。

window.onscroll = function() {
  var wScroll = window.pageYOffset;
  var wHeight = window.innerHeight;
  if (wScroll > wHeight ) {
  document.getElementById("tease").style.height = 0;

  }
}

body {
  padding: 0;
  margin: 0;
}

#tease {
  width: 100%;
  height: 100vh;
  background: lightblue;
  transition: 1s ease-in-out;
}

#content {
  width: 100%;
  height: 100vh;
  background: pink;
  transition: 1s ease-in-out;
}

#content2 {
  width: 100%;
  height: 100vh;
  background: purple;
  transition: 1s ease-in-out;
}

<div id="tease"></div>
<div id="content"></div>
<div id="content2"></div>

【讨论】：

我们尝试了类似的方法，虽然它对 UI 的影响不那么激进，但在重绘时它仍然会抖动可见部分。

【解决方案2】：

我们解决了这个难题，让英雄图片 (div 2) 具有粘性并为 info (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 的访问者使用。

【讨论】：