在前端开发中，模态框（Modal）是常见的一种交互方式。用户点击某个按钮或链接，弹出一个对话框，展示特定的信息或提供操作选项。然而，在打开模态框时，如果不进行处理，页面可能会因为滚动而失去焦点，影响用户体验。本文将介绍如何在打开模态框时防止页面滚动，提升用户体验。
问题描述
当打开模态框时，通常会使用 CSS 设置其为固定定位（position: fixed），并使其覆盖在页面上方。这样可以让用户专注于模态框的内容，同时保持页面背景不变。但是，当用户拖动鼠标滚轮或触摸屏幕时，页面仍然会滚动，导致模态框失去了焦点，用户体验受到影响。
解决方案
为了解决这个问题，我们需要在打开模态框时，禁用页面滚动。具体来说，我们需要执行以下步骤：
- 获取当前滚动位置
- 计算弹窗后视口高度
- 设置 body 样式，禁止滚动
- 在关闭弹窗时，恢复滚动位置和 body 样式
下面是相应的 JavaScript 代码实现：
-- -------------------- ---- ------- -- --------------- --- - ----- --- - ------------------ -- ----------------------------------- -- --------------- ------ - ----- ------ - ------------------ -- -------------------------------------- -- -- ---- ------- ---------------------------- - -------- ----------------------- - ------------ ------------------------- - ------- -- ------------- ---- -- -------- ------------ - ---------------------------- - --- ----------------------- - --- ------------------------- - --- ------------------ ----- -
这段代码首先获取当前滚动位置，并计算弹窗后的视口高度。然后，它设置了 body 元素的样式，将其固定在当前位置，并设置其宽度为 100%。最后，在关闭弹窗时，恢复了滚动位置和 body 样式。
实际应用
在实际开发中，我们可以将上述代码封装成一个函数，方便调用。例如：
-- -------------------- ---- -------
-------- ----------- -
----- --- - ------------------ -- -----------------------------------
----- ------ - ------------------ -- --------------------------------------
---------------------------- - --------
----------------------- - ------------
------------------------- - -------
-------- ------------ -
---------------------------- - ---
----------------------- - ---
------------------------- - ---
------------------ -----
-
-- --- ------
-这样，在打开模态框时，我们只需要调用 openModal 函数即可：
<button onclick="openModal()">打开模态框</button>
结论
通过禁止页面滚动，我们可以在打开模态框时，提升用户体验。本文介绍了如何通过 JavaScript 实现这个功能，并给出了实际应用示例。当然，不同的项目可能会有不同的需求，我们需要根据具体情况进行调整和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8729