弹出窗口打开时如何停止背景滚动 - Javascript

当我们打开一个弹出窗口时，网页背景有可能会继续滚动，影响用户体验。本文将介绍如何使用Javascript停止网页背景的滚动。

阻止默认行为

当我们滚动滚动条时，页面会自动滚动。而我们希望打开弹出窗口时阻止这个默认行为，就需要使用Javascript中的event.preventDefault()方法。

// 阻止默认滚动行为
document.body.style.overflow = 'hidden';

恢复默认行为

当我们关闭弹出窗口时，需要恢复网页的默认滚动行为。为了恢复默认行为，我们可以把document.body.style.overflow属性的值设置为空。

// 恢复默认滚动行为
document.body.style.overflow = '';

完整代码

// 停止背景滚动
function stopBodyScrolling() {
  document.body.style.overflow = 'hidden';
}

// 恢复背景滚动
function startBodyScrolling() {
  document.body.style.overflow = '';
}

在你的代码中使用这些方法，即可停止或恢复网页背景的滚动。

以上就是本文的全部内容，希望能对你有所帮助。