四種防止模態(tài)框彈出時(shí)頁(yè)面滾動(dòng)的方法

我們面對(duì)現(xiàn)實(shí)吧，可怕的“滾動(dòng)離開”時(shí)刻——當(dāng)用戶點(diǎn)擊模式時(shí)，整個(gè)頁(yè)面卻繼續(xù)向下滾動(dòng)，這種尷尬的情況！這會(huì)打亂流程，讓用戶感到沮喪，并帶來(lái)不太好的體驗(yàn)。

但不要害怕，各位小伙伴！為了防止這種常見的網(wǎng)站煩惱比您想象的要容易。以下是4種久經(jīng)考驗(yàn)的方法，每種方法都有自己的優(yōu)點(diǎn)和缺點(diǎn)：

1. Overflow:hidden — 經(jīng)典方法

overflow:hidden CSS 屬性是一種久經(jīng)考驗(yàn)的防止?jié)L動(dòng)的方法。只需將一個(gè)類（例如，no-scroll）添加到 <body> 標(biāo)簽，并將其鏈接到帶有 overflow:hidden 的 CSS 規(guī)則。

復(fù)制

.no-scroll {
  overflow: hidden;
}1.2.3.

當(dāng)模態(tài)框彈出時(shí)，使用 JavaScript 添加此類，并在模態(tài)框關(guān)閉時(shí)將其刪除。此方法會(huì)停止?jié)L動(dòng)并隱藏滾動(dòng)條。

2. Position: Fixed — 修復(fù)程序

想要在模態(tài)框彈出時(shí)保持頁(yè)面原位？position: fixed 可以提供幫助！

向<body> 添加 no-scroll 之類的類并應(yīng)用以下 CSS：

復(fù)制

.no-scroll {
  position: fixed;
  width: 100%;
}1.2.3.4.

這會(huì)將頁(yè)面錨定到視口，保持其原始寬度。請(qǐng)記住確保您的模態(tài)框具有適當(dāng)?shù)母叨龋駝t內(nèi)容可能會(huì)被截?cái)唷?/span>

3. 滾動(dòng)事件 — JavaScript 大師

對(duì)于更注重 JavaScript 的方法，我們可以使用滾動(dòng)事件在模態(tài)框出現(xiàn)時(shí)禁用滾動(dòng)。

復(fù)制

document.addEventListener('scroll', disableScroll);
function disableScroll() {
  window.scrollTo(0, 0);
}1.2.3.4.

當(dāng)模式關(guān)閉時(shí)，刪除事件監(jiān)聽器以重新啟用滾動(dòng)。此方法不需要更改 CSS，并且在桌面和移動(dòng)設(shè)備上都能很好地工作。

4. Overscroll-Behavior：Contain — 現(xiàn)代選擇

準(zhǔn)備好采用更現(xiàn)代的方法了嗎？overscroll-behavior 屬性可以控制頁(yè)面邊緣的滾動(dòng)行為。

復(fù)制

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overscroll-behavior: contain;
}1.2.3.4.5.6.7.

通過(guò)將其設(shè)置為包含，可以阻止頁(yè)面滾動(dòng)，但允許在模式本身內(nèi)滾動(dòng)。請(qǐng)記住在模式關(guān)閉時(shí)刪除此屬性。

總結(jié)，請(qǐng)選擇合適的武器

這 4 種方法都提供了在模式彈出時(shí)，阻止頁(yè)面滾動(dòng)的不同方法。再具體項(xiàng)目開發(fā)時(shí)，我們需要選擇適合自己項(xiàng)目的情況，來(lái)匹配項(xiàng)目的需要，不能隨意選擇。

更多資訊，點(diǎn)擊全場(chǎng)景直播解決方案-航天云網(wǎng)解決方案

用Bootstrap3模態(tài)框，可以在網(wǎng)頁(yè)中以彈窗的形式展示內(nèi)容，常用于顯示消息、表單、圖片等。

下面介紹幾種常見的使用方法：

1 基本用法

在網(wǎng)頁(yè)中添加一個(gè)觸發(fā)模態(tài)框的按鈕，并在按鈕的data-toggle屬性中指定模態(tài)框的ID。然后在網(wǎng)頁(yè)中添加一個(gè)與按鈕ID相同的模態(tài)框，并在模態(tài)框中添加內(nèi)容。

<!-- 觸發(fā)模態(tài)框的按鈕 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  點(diǎn)擊彈出模態(tài)框
</button>

<!-- 模態(tài)框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">模態(tài)框標(biāo)題</h4>
      </div>
      <div class="modal-body">
        模態(tài)框內(nèi)容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2 通過(guò)JavaScript調(diào)用模態(tài)框

可以通過(guò)JavaScript代碼來(lái)調(diào)用模態(tài)框，這種方法可以在不使用按鈕的情況下觸發(fā)模態(tài)框。

<!-- 觸發(fā)模態(tài)框的按鈕 -->
<button type="button" class="btn btn-primary" onclick="showModal()">
  點(diǎn)擊彈出模態(tài)框
</button>

<!-- 模態(tài)框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <!-- 省略模態(tài)框內(nèi)容 -->
</div>

<!-- JavaScript代碼 -->
<script>
function showModal() {
  $('#myModal').modal('show');
}
</script>

3 Ajax載入模態(tài)框內(nèi)容

可以通過(guò)Ajax技術(shù)動(dòng)態(tài)載入模態(tài)框中的內(nèi)容。

<!-- 觸發(fā)模態(tài)框的按鈕 -->
<button type="button" class="btn btn-primary" onclick="loadModalContent()">
  點(diǎn)擊彈出模態(tài)框
</button>

<!-- 模態(tài)框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modal-body">
        模態(tài)框內(nèi)容將通過(guò)Ajax動(dòng)態(tài)載入
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- JavaScript代碼 -->
<script>
function loadModalContent() {
  $('#myModal').modal('show');
  $('#modal-body').load('/path/to/modal-content.html');
}
</script>

潛在問(wèn)題

在使用Bootstrap3模態(tài)框時(shí)，可能會(huì)出現(xiàn)以下潛在問(wèn)題：

模態(tài)框無(wú)法顯示

如果模態(tài)框無(wú)法顯示，可能是因?yàn)槟B(tài)框的HTML代碼或JavaScript代碼有誤，或者相關(guān)的Bootstrap庫(kù)文件沒有正確引入。解決方法包括檢查代碼是否正確、檢查庫(kù)文件是否正確引入、檢查模態(tài)框相關(guān)的CSS樣式是否正確等。

模態(tài)框出現(xiàn)閃爍

如果模態(tài)框出現(xiàn)閃爍，可能是因?yàn)槟B(tài)框的內(nèi)容過(guò)多，導(dǎo)致模態(tài)框出現(xiàn)滾動(dòng)條，從而造成頁(yè)面抖動(dòng)。解決方法包括減少模態(tài)框的內(nèi)容、優(yōu)化模態(tài)框的樣式、禁止頁(yè)面滾動(dòng)等。

模態(tài)框無(wú)法關(guān)閉

如果模態(tài)框無(wú)法關(guān)閉，可能是因?yàn)槟B(tài)框的JavaScript代碼有誤，或者模態(tài)框的HTML代碼中的關(guān)閉按鈕沒有正確綁定關(guān)閉事件。解決方法包括檢查JavaScript代碼是否正確、檢查關(guān)閉按鈕的data-dismiss屬性是否正確等。

模態(tài)框的顯示效果不符合預(yù)期

如果模態(tài)框的顯示效果不符合預(yù)期，可能是因?yàn)槟B(tài)框的CSS樣式?jīng)]有正確設(shè)置。解決方法包括檢查CSS樣式是否正確設(shè)置、參考Bootstrap官方文檔調(diào)整樣式等。

為避免這些潛在問(wèn)題，可以注意以下幾點(diǎn)：

正確引入Bootstrap庫(kù)文件

在使用Bootstrap3模態(tài)框時(shí)，需要正確引入相關(guān)的庫(kù)文件，包括Bootstrap的CSS樣式文件和JavaScript代碼文件。可以參考Bootstrap官方文檔了解如何引入庫(kù)文件。

檢查HTML代碼和JavaScript代碼

在使用Bootstrap3模態(tài)框時(shí)，需要檢查HTML代碼和JavaScript代碼是否正確。可以使用瀏覽器的開發(fā)者工具來(lái)檢查代碼是否存在語(yǔ)法錯(cuò)誤、是否正確綁定事件等。

盡量減少模態(tài)框的內(nèi)容

為避免模態(tài)框出現(xiàn)閃爍等問(wèn)題，可以盡量減少模態(tài)框的內(nèi)容。如果模態(tài)框的內(nèi)容過(guò)多，可以考慮使用分頁(yè)、滾動(dòng)條等方式來(lái)優(yōu)化模態(tài)框的顯示效果。

參考Bootstrap官方文檔調(diào)整樣式

如果模態(tài)框的顯示效果不符合預(yù)期，可以參考Bootstrap官方文檔來(lái)調(diào)整相關(guān)的CSS樣式。可以使用瀏覽器的開發(fā)者工具來(lái)調(diào)試樣式，或者查閱Bootstrap官方文檔了解如何調(diào)整樣式。

在Firefox中單獨(dú)設(shè)置滾動(dòng)條樣式，你可以使用?@-moz-document??規(guī)則。這個(gè)規(guī)則允許你為特定的瀏覽器或?yàn)g覽器引擎應(yīng)用樣式。

下面是一個(gè)例子，演示如何在Firefox中隱藏滾動(dòng)條：

@-moz-document url-prefix() {
  /* 在這里添加只對(duì)Firefox生效的樣式 */
  body {
    scrollbar-width: none;
  }
}

在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）為前綴的情況下，才會(huì)應(yīng)用其中的樣式。在??body??元素中，??scrollbar-width: none;??將隱藏滾動(dòng)條。

請(qǐng)注意，這樣的規(guī)則只在Firefox中生效，而在其他瀏覽器中會(huì)被忽略。確保在使用這樣的規(guī)則時(shí)進(jìn)行測(cè)試，以確保所需的效果在目標(biāo)瀏覽器中按預(yù)期工作。

在CSS中，??*???（星號(hào)）和 ??body?? 分別選擇不同的元素或元素集合。

*?（星號(hào)）選擇器：這是通配符選擇器，匹配文檔中的所有元素。使用 * 會(huì)選擇頁(yè)面上的每個(gè)元素，無(wú)論是塊級(jí)元素、行內(nèi)元素還是其他類型的元素。例如：

* {
  margin: 0;
  padding: 0;
}

上述代碼會(huì)將頁(yè)面中所有元素的內(nèi)外邊距設(shè)置為零。

body? 選擇器： 這是針對(duì)文檔的 <body> 元素的選擇器。body 選擇器用于針對(duì)整個(gè)文檔的主體部分應(yīng)用樣式。例如：

body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

上述代碼會(huì)將文檔主體部分的字體設(shè)置為 Arial，并將背景顏色設(shè)置為 #f0f0f0。

所以，??*??? 是一個(gè)通用的選擇器，匹配所有元素，而 ??body??? 是特定于文檔主體的選擇器，用于選擇文檔主體元素并應(yīng)用樣式。在某些情況下，你可能希望使用 ??body?? 選擇器，以更有針對(duì)性地影響文檔的主要內(nèi)容區(qū)域。

在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 偽類選擇器已被棄用，取而代之的是使用更通用的 CSS Scrollbar 模塊規(guī)范。為了在 Firefox 中優(yōu)化滾動(dòng)條并使其變細(xì)，你可以使用新的規(guī)范中的屬性。

以下是一個(gè)簡(jiǎn)單的示例，可以使 Firefox 中的滾動(dòng)條變細(xì)：

/* Firefox 滾動(dòng)條樣式 */
* {
  scrollbar-width: thin;
  scrollbar-color: #999999 #f0f0f0;
}

/* Webkit 滾動(dòng)條樣式（Chrome, Safari等）*/
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: #999999;
}

*::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

上述樣式包含兩部分：

??scrollbar-width?? 和 scrollbar-color 是 Firefox 滾動(dòng)條樣式的屬性。scrollbar-width: thin; 會(huì)使?jié)L動(dòng)條變細(xì)，而 scrollbar-color 用于定義滾動(dòng)條的顏色。在這里，滾動(dòng)條顏色被設(shè)置為灰色 (#999999)，滾動(dòng)條軌道的顏色被設(shè)置為淡灰色 (#f0f0f0)。
對(duì)于 Webkit 內(nèi)核的瀏覽器（如 Chrome 和 Safari），使用 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 來(lái)定義滾動(dòng)條樣式。

請(qǐng)注意，滾動(dòng)條樣式在不同瀏覽器中可能會(huì)有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實(shí)際使用中，你可能需要根據(jù)需要進(jìn)行調(diào)整和測(cè)試，以確保在不同瀏覽器中都能達(dá)到預(yù)期的效果。

在線咨詢

上一篇：一文搞定移動(dòng)端適配
下一篇：Highcharts 動(dòng)態(tài)圖

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

四種防止模態(tài)框彈出時(shí)頁(yè)面滾動(dòng)的方法

1. Overflow:hidden — 經(jīng)典方法

2. Position: Fixed — 修復(fù)程序

3. 滾動(dòng)事件 — JavaScript 大師

4. Overscroll-Behavior：Contain — 現(xiàn)代選擇

總結(jié)，請(qǐng)選擇合適的武器

1 基本用法

2 通過(guò)JavaScript調(diào)用模態(tài)框

3 Ajax載入模態(tài)框內(nèi)容

潛在問(wèn)題

您的項(xiàng)目需求