我希望我的身體在使用鼠標滾輪時停止滾動，同時我的網站上的Modal(來自http://twitter.github.com/bootstrap)處于打開狀態。

當模式打開時，我試圖調用下面這段javascript代碼，但是沒有成功

$(window).scroll(function() { return false; });

和

$(window).live('scroll', function() { return false; });

請注意，我們的網站放棄了對IE6的支持，盡管IE7+需要兼容。

當顯示模態對話框時，Bootstrap的模態自動將類modal-open添加到主體中，當對話框隱藏時，將它移除。因此，您可以將以下內容添加到CSS中:

body.modal-open {
    overflow: hidden;
}

你可能會爭辯說上面的代碼屬于引導CSS代碼庫，但是這是一個簡單的將它添加到你的站點的方法。

2013年2月8日更新 這在Twitter Bootstrap v. 2.3.0中已經停止工作了——他們不再在主體中添加模態開放類。

一種解決方法是在模式將要顯示時將該類添加到主體中，并在模式關閉時將其移除:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013年3月11日更新 看起來模態開放類將在Bootstrap 3.0中返回，這顯然是為了防止滾動:

重新引入。模態-在身體上打開(這樣我們就可以用核彈攻擊那里的卷軸)

看這個:https://github.com/twitter/bootstrap/pull/6342，看模態部分。

公認的答案在移動設備上是行不通的(至少在iOS 7 w/ Safari 7上是這樣)，我不想讓MOAR JavaScript在我的網站上運行，而CSS可以做到這一點。

這個CSS將阻止背景頁面在模式下滾動:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

然而，它也有一個輕微的副作用，基本上是滾動到頂部。position:absolute解決了這個問題，但是重新引入了在手機上滾動的功能。

如果你知道你的視窗(我的插件把視窗添加到& ltbody & gt)你可以為這個位置添加一個css開關。

body.modal-open {
    /* block scroll for mobile; */
    /* causes underlying page to jump to top; */
    /* prevents scrolling on all screens */
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    /* block scroll for desktop; */
    /* will not jump to top; */
    /* will not prevent scroll on mobile */
    position: absolute; 
}

我還添加了這個來防止底層頁面在顯示/隱藏模態時向左/向右跳轉。

body {
    /* STOP MOVING AROUND! */
    overflow-x: hidden;
    overflow-y: scroll !important;
}

這個回答是個x帖。

簡單地隱藏身體溢出，它使身體不滾動。隱藏模態時，將其恢復為自動。

代碼如下:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

你需要超越@charlietfl的回答，并考慮滾動條，否則你可能會看到一個文檔回流。

打開模式: 記錄車身寬度 將正文溢出設置為隱藏 將正文寬度明確設置為步驟1中的寬度。

var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

關閉模式: 將正文溢出設置為自動 將正文寬度設置為自動

var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

靈感來源:http://JD sharp . us/jQuery/minute/calculate-scroll bar-width . PHP

你可以試著在模式打開時用溢出:隱藏來設置主體大小為窗口大小

警告:下面的選項與Bootstrap v3.0.x無關，因為在這些版本中，滾動被明確限制在模式本身。如果禁用滾輪事件，您可能會無意中阻止某些用戶查看高度大于視區高度的模式中的內容。

還有一個選擇:車輪事件 滾動事件不可取消。但是，可以取消鼠標滾輪和滾輪事件。值得注意的是，并不是所有的傳統瀏覽器都支持它們，Mozilla最近才在Gecko 17.0中增加了對后者的支持。不知道全面鋪開，但是IE6+和Chrome確實支持。

以下是如何利用它們:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle 試試這個:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

對我很有效。(支持IE8)

截至2017年11月，Chrome引入了新的css屬性

過度翻滾-行為:遏制；

它解決了這個問題，盡管截至本文撰寫時，它對跨瀏覽器的支持還很有限。

請參見下面的鏈接，了解完整的詳細信息和瀏覽器支持

https://developer . Mozilla . org/en-US/docs/Web/CSS/over scroll-behavior https://developers . Google . com/web/updates/2017/11/over scroll-behavior 僅僅通過改變CSS無法讓它在Chrome上工作，因為我不想讓頁面滾回頂部。這很有效:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

添加類“is-modal-open”或者用javascript修改body標簽的樣式是可以的，它會像預期的那樣工作。但是我們要面對的問題是當主體溢出時:隱藏，它會跳到頂部，(scrollTop會變成0)。這將成為以后的可用性問題。

作為這個問題的解決方案，不要改變body標簽overflow:hidden，而是在html標簽上改變它

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

對于Bootstrap，您可以嘗試這樣做(在Firefox、Chrome和Microsoft Edge上工作) :

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

反應，如果你正在尋找

在即將流行的模式中使用Effect

useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

我不確定這段代碼，但值得一試。

在jQuery中:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

正如我之前說的，我不是100%確定，但無論如何要試試。

我不能100%確定這是否適用于Bootstrap，但值得一試——它適用于Remodal.js，可以在github:http://vodkabears.github.io/remodal/上找到，而且方法非常相似是有意義的。

要阻止頁面跳轉到頂部并防止內容右移，請在模式被觸發時向正文添加一個類，并設置這些CSS規則:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

position:static和height:auto共同阻止內容向右跳轉。溢出-y:隱藏；阻止頁面在模式后滾動。

現在是2022年，現在有更好的CSS解決方案。這個很好用。當模式打開時，可以將該類添加到body元素中，或者修改body樣式本身。

.body-no-scroll {
    height: 100vh;
    width: 100vw;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
  }

最好的解決方案是這些答案大部分使用的css-only body{overflow:hidden}解決方案。一些答案提供了一個補丁，也防止了滾動條的消失所導致的“跳轉”;然而，沒有一個是太優雅的。所以，我寫了這兩個函數，看起來效果還不錯。

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

查看這個jsFiddle，看看它的使用情況。

許多人建議在主體上顯示“溢出:隱藏”，這是行不通的(至少對我來說是這樣)，因為它會讓網站滾動到頂部。

這是適合我的解決方案(在手機和電腦上都適用)，使用jQuery:

$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

這將使模態的滾動起作用，同時防止網站滾動。

我必須設置視口高度，以使其完美工作

body.modal-open {
  height: 100vh;
  overflow: hidden;
}

你可以使用下面的邏輯，我測試過了，它有效(甚至在IE中)

<html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

基于這把小提琴:http://jsfiddle.net/dh834zgw/1/

以下代碼片段(使用jquery)將禁用窗口滾動:

var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

在你的css中:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

現在，當您刪除modal時，不要忘記刪除html標記上的noscroll類:

$('html').toggleClass('noscroll');

遺憾的是，上面的答案都沒有解決我的問題。

在我的情況下，網頁最初有一個滾動條。每當我點擊模式，滾動條不會消失，標題會向右移動一點。

然后我試著補充。modal-open { overflow:auto；}(大多數人推薦的)。它確實解決了這個問題:當我打開模式時，滾動條出現了。然而，另一個副作用出現了，那就是“標題下面的背景將會向左移動一點，以及模態后面的另一個長條”

幸運的是，在我添加{padding-right: 0！重要；}，一切都完美固定。標題和正文背景都沒有移動，模式仍然保持滾動條。

希望這能幫助那些仍然被這個問題困擾的人。祝你好運！

這個解決方案對我很有效:

var scrollDistance = 0;
$(document).on("show.bs.modal", ".modal", function () {
    scrollDistance = $(window).scrollTop();
    $("body").css("top", scrollDistance * -1);
});

$(document).on("hidden.bs.modal", ".modal", function () {
    $("body").css("top", "");
    $(window).scrollTop(scrollDistance);
});

.content-area {
  height: 750px;
  background: grey;
  text-align: center;
  padding: 25px;
  font-weight:700;
  font-size: 30px;
}

body.modal-open {
  position: fixed;
  left: 0;
  width: 100%;
}

<link  rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<div class="content-area">
   Scroll Down To Modal Button<br/>
   <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
   </svg>
</div>

<center class="my-3">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
</center>


<div class="content-area"></div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

這對我很有效:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

大部分的片段都在這里，但是我沒有看到任何把它們放在一起的答案。

這個問題有三個方面。

(1)防止底層頁面的滾動

$('body').css('overflow', 'hidden')

(2)取出滾動條

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3)模態解除時的清理

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

如果模式不是全屏的，則應用。全屏覆蓋的模態綁定。

我對Bootstrap 3的解決方案:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因為對我來說唯一的溢出:隱藏在body.modal-open類上并沒有因為原來的margin-right: 15px而阻止頁面向左移動。

我就是這樣做的...

$('body').css('overflow', 'hidden');

但是當滾動條消失時，它把所有東西都向右移動了20px，所以我加了一個

$('body').css('margin-right', '20px');

緊隨其后。

對我有用。

如果模態是100%高度/寬度,“鼠標輸入/離開”將很容易啟用/禁用滾動。這真的很適合我:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

我有一個由checkbox hack生成的側邊欄。 但是主要思想是保存文檔scrollTop，而不是在滾動窗口的過程中更改它。

我只是不喜歡正文變成“溢出:隱藏”時的頁面跳轉。

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

因為對我來說，這個問題主要出現在iOS上，所以我只在iOS上提供代碼來解決這個問題:

if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }