滚动到页边距为100vh的div

是指在网页中存在一个div元素，当用户滚动页面时，当该div元素的顶部与页面顶部的距离小于等于100vh（视口高度）时，该div元素会出现在页面的可视区域内。

这种滚动效果可以通过CSS和JavaScript来实现。首先，我们可以使用CSS来设置div元素的样式，使其具有固定的位置和大小，并且设置其初始状态为隐藏。例如：

.div-class {
  position: fixed;
  top: 100vh;
  width: 100%;
  height: 100px;
  background-color: #f1f1f1;
  display: none;
}

接下来，我们可以使用JavaScript来监听页面滚动事件，并根据滚动位置来判断是否显示该div元素。例如：

window.addEventListener('scroll', function() {
  var div = document.querySelector('.div-class');
  var distance = div.getBoundingClientRect().top;
  var viewportHeight = window.innerHeight;

  if (distance <= viewportHeight) {
    div.style.display = 'block';
  } else {
    div.style.display = 'none';
  }
});

在上述代码中，我们通过getBoundingClientRect()方法获取了div元素相对于视口的位置信息，然后与视口高度进行比较，如果距离小于等于视口高度，则显示该div元素，否则隐藏该div元素。

这种滚动效果可以用于吸顶导航、回到顶部按钮等场景，提升用户体验和页面交互性。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和业务需求。产品介绍链接
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于图片、音视频、文档等各类数据的存储和管理。产品介绍链接
• 腾讯云内容分发网络（CDN）：加速内容分发，提升用户访问速度和体验。产品介绍链接
• 腾讯云云函数（SCF）：无服务器的事件驱动型计算服务，帮助开发者更轻松地构建和管理应用程序。产品介绍链接
• 腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。产品介绍链接