以模态响应本机滚动视图 - Javascript

在Web开发中，一个常见的需求是在弹出框（modal）中展示一张图片或一段长文本。当这些内容过长时，我们需要将其放置在一个可滚动的容器中。此时，如果用户在弹出框内部滚动，整个页面的滚动也会发生变化，影响了用户体验。本文将介绍如何使用Javascript实现一个模态滚动容器，使得用户在弹出框内部滚动时，整个页面的滚动不会被影响。

实现方法

HTML结构

我们需要在弹出框中添加一个容器，该容器的高度固定，且使用overflow-y属性来指定垂直方向上的滚动条。这里我们以一个包含长文本的弹出框为例：

<div id="modal">
  <div class="content">
    <!-- 文本内容过长时，会出现垂直方向上的滚动条 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae elit faucibus, consectetur sapien ac, tempor mauris. Praesent eget neque at mauris ultrices tincidunt blandit eu mauris. Ut auctor purus quis risus pulvinar gravida. Nulla ut nulla at quam pharetra interdum. Ut ut finibus metus. Sed risus odio, feugiat vitae ipsum vel, imperdiet placerat enim. Maecenas ut bibendum neque. </p>
  </div>
</div>

JavaScript

接下来，我们需要监听弹出框内部的滚动事件，当用户滚动时，阻止弹出框的滚动事件向父级元素传递。同时，我们还需要在弹出框展示时，添加一个class来禁止页面滚动（在iOS上有效）；关闭弹出框时，移除该class并解绑监听器。

// 获取弹出框和内容容器
const modal = document.querySelector('#modal');
const content = document.querySelector('.content');

// 将整个页面的滚动事件禁止
function disableBodyScroll() {
  document.body.classList.add('disable-scroll');
}

// 将整个页面的滚动事件恢复
function enableBodyScroll() {
  document.body.classList.remove('disable-scroll');
}

// 监听滚动事件
content.addEventListener('scroll', function(e) {
  // 如果滚动到了容器底部，停止滚动事件冒泡
  if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) {
    e.stopPropagation();
  } else if (e.target.scrollTop === 0) {
    // 如果滚动到了容器顶部，仍然停止滚动事件冒泡
    e.stopPropagation();
  }
});

// 在弹出框展示时禁止页面滚动
modal.addEventListener('show.bs.modal', function() {
  disableBodyScroll();
});

// 在弹出框关闭时恢复页面滚动
modal.addEventListener('hidden.bs.modal', function() {
  enableBodyScroll();
});

CSS样式

为了实现禁止页面滚动，我们需要添加一个类名为disable-scroll的样式，在其中将页面的overflow属性设置为hidden，以禁止页面滚动。

.disable-scroll {
  overflow: hidden;
}

结论

通过以上的步骤，我们实现了一个模态滚动容器，用户在弹出框内部滚动时，整个页面的滚动不会被影响。我们监听了内部的滚动事件，并阻止事件的冒泡，同时使用CSS样式禁止了页面滚动。在实际项目中，我们还需要考虑到不同设备、不同浏览器的兼容性问题。