如何使滚轮滚动距离达到页面高度的100%？

要使滚轮滚动距离达到页面高度的100%，可以通过以下步骤实现：

使用JavaScript获取页面的高度：可以使用document.documentElement.scrollHeight或document.body.scrollHeight获取整个页面的高度。
监听滚轮事件：使用JavaScript的addEventListener方法，监听滚轮事件。例如，可以使用以下代码监听滚轮事件：

window.addEventListener('wheel', function(event) {
  // 在这里编写代码
});

计算滚动距离：在滚轮事件的回调函数中，可以通过event.deltaY获取滚轮滚动的距离。然后，将滚动距离与页面高度进行比较，如果小于页面高度，则将滚动距离设置为页面高度。

window.addEventListener('wheel', function(event) {
  var scrollDistance = event.deltaY;
  var pageHeight = document.documentElement.scrollHeight;
  
  if (Math.abs(scrollDistance) < pageHeight) {
    scrollDistance = Math.sign(scrollDistance) * pageHeight;
  }
  
  // 在这里编写代码
});

使用滚动动画：为了实现平滑的滚动效果，可以使用CSS的scroll-behavior属性或JavaScript的动画库，如jQuery的animate方法，来实现滚动动画效果。

window.addEventListener('wheel', function(event) {
  var scrollDistance = event.deltaY;
  var pageHeight = document.documentElement.scrollHeight;
  
  if (Math.abs(scrollDistance) < pageHeight) {
    scrollDistance = Math.sign(scrollDistance) * pageHeight;
  }
  
  // 使用滚动动画
  $('html, body').animate({ scrollTop: scrollDistance }, 1000);
});

通过以上步骤，可以实现滚轮滚动距离达到页面高度的100%。请注意，以上代码示例中使用了jQuery库来实现滚动动画，如果您不使用jQuery，可以使用其他动画库或自行编写动画代码来实现滚动效果。

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