Cegah BODY agar tidak menggulir saat modal dibuka

346

Saya ingin tubuh saya berhenti bergulir ketika menggunakan roda mouse saat Modal (dari http://twitter.github.com/bootstrap ) di situs web saya dibuka.

Saya sudah mencoba untuk memanggil potongan javascript di bawah ini ketika modal dibuka tetapi tidak berhasil

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

DAN

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

Harap dicatat bahwa situs web kami tidak mendukung IE6, IE7 + harus kompatibel.

javascript jquery css scroll xorinzor
sumber

468

Bootstrap modalsecara otomatis menambahkan kelas modal-openke tubuh ketika dialog modal ditampilkan dan menghapusnya ketika dialog disembunyikan. Karena itu Anda dapat menambahkan yang berikut ke CSS Anda:

body.modal-open {
    overflow: hidden;
}

Anda bisa berpendapat bahwa kode di atas adalah milik basis kode Bootstrap CSS, tetapi ini adalah perbaikan yang mudah untuk menambahkannya ke situs Anda.

Pembaruan 8 feb, 2013
Ini sekarang telah berhenti berfungsi di Twitter Bootstrap v. 2.3.0 - mereka tidak lagi menambahkan modal-openkelas ke tubuh.

Solusinya adalah menambahkan kelas ke tubuh ketika modal akan ditampilkan, dan menghapusnya ketika modal ditutup:

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

Perbarui 11 Maret, 2013 Sepertinya modal-openkelas akan kembali di Bootstrap 3.0, secara eksplisit untuk tujuan mencegah gulir:

Reintroduces .modal-open pada tubuh (jadi kita bisa nuke gulir di sana)

Lihat ini: https://github.com/twitter/bootstrap/pull/6342 - lihat bagian Modal .

MartinHN
sumber

2

ini tidak berfungsi lagi di bootstrap 2.2.2. Semoga .modal-open akan kembali di masa depan ... github.com/twitter/bootstrap/issues/5719

ppetrid

2

@petpetrid Saya tidak berharap untuk kembali. Berdasarkan tulisan ini: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (lihat bagian bawah). Quote: "Tidak ada lagi dalam bergulir modal Sebaliknya, kata modal akan tumbuh ke rumah konten mereka dan halaman gulir ke rumah modal itu."

MartinHN

2

@Bagata Cool - modal-openakan kembali di Bootstrap 3, jadi ketika diluncurkan, aman untuk menghapus kode di atas.

MartinHN

2

Inilah sebabnya mengapa orang harus terus menggulir ke bawah, jika jawaban yang dipilih tidak memuaskan Anda, ada kemungkinan Anda akan menemukan permata seperti ini. tidak mengharapkan jawaban 97+ terpilih terkubur begitu dalam di bawah komentar yang kurang disukai lainnya.

Mohd Abdul Mujib

2

masalah dengan ini adalah untuk mencegah dokumen bergulir ke atas ketika modal dibuka Anda perlu menambahkan body.modal-open {overflow: visible}. Solusi Anda bekerja saat ini, dengan kerugian yang dokumen gulir ke atas begitu modal terbuka

patrick

120

Jawaban yang diterima tidak berfungsi di ponsel (setidaknya iOS 7 w / Safari 7) dan saya tidak ingin MOAR JavaScript berjalan di situs saya ketika CSS akan melakukannya.

CSS ini akan mencegah halaman latar belakang bergulir di bawah modal:

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

Namun, itu juga memiliki sedikit efek samping pada dasarnya bergulir ke atas. position:absolutemengatasi ini tetapi, memperkenalkan kembali kemampuan untuk menggulir di ponsel.

Jika Anda tahu viewport Anda ( plugin saya untuk menambahkan viewport ke<body> ), Anda bisa menambahkan toggle css untuk position.

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; 
}

Saya juga menambahkan ini untuk mencegah halaman yang mendasarinya dari melompat ke kiri / kanan ketika menampilkan / menyembunyikan modals.

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

jawaban ini adalah x-post.

Brad
sumber

7

Terima kasih! Ponsel (setidaknya iOS dan Android browser asli) memberi saya sakit kepala dan tidak akan berfungsi tanpa position: fixeddi tubuh.

Raul Rene

Terima kasih telah memasukkan kode untuk mencegah halaman dari melompat ke kiri / kanan ketika menampilkan / menyembunyikan modals. Ini sangat berguna dan saya memverifikasi itu memperbaiki masalah yang saya alami di Safari pada iPhone 5c yang menjalankan iOS 9.2.1.

Elijah Lofgren

6

Untuk memperbaiki pengguliran ke atas, Anda dapat merekam posisi sebelum menambahkan kelas, lalu setelah kelas dihapus, lakukan window.scroll ke posisi yang direkam. Ini adalah bagaimana saya memperbaikinya sendiri: pastebin.com/Vpsz07zd .

Alat

Meskipun saya merasa ini hanya sesuai dengan kebutuhan yang sangat mendasar, itu adalah perbaikan yang bermanfaat. Terima kasih.

Steve Benner

32

Cukup sembunyikan body overflow dan itu membuat tubuh tidak menggulir. Saat Anda menyembunyikan modal, kembalikan ke otomatis.

Ini kodenya:

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

Mehmet Fatih Yıldız
sumber

Luar biasa! Ini membantu saya. Terima kasih.

pfcodes

21

Anda bisa mencoba mengatur ukuran tubuh ke ukuran jendela dengan overflow: disembunyikan ketika modal terbuka

charlietfl
sumber

12

melakukan hal itu akan menggerakkan layar setiap kali modal dibuka, itu tidak nyaman, saya hanya perlu menonaktifkan gulir latar belakang

xorinzor

tidak yakin bahwa Anda dapat scrollbar terkait browser dan Anda tidak dapat berbuat banyak dengan mereka

charlietfl

Anda dapat mengatur modal untuk "diperbaiki" sehingga tidak akan bergerak saat menggulir

charlietfl

8

ini bukan tentang menghentikan modal dari pengguliran, ini tentang menghentikan tubuh di latar belakang dari pengguliran

xorinzor

1

itu adalah jendela yang menggulir jika tubuh meluap. Misalnya bilah gulir bukan bagian dari dokumen.

charlietfl

18

Anda harus melampaui jawaban dan akun @ charlietfl untuk bilah gulir, jika tidak, Anda dapat melihat dokumen reflow.

Membuka modal:

Catat bodylebarnya
Setel bodyoverflow kehidden

Secara eksplisit mengatur lebar tubuh dengan apa yang ada di langkah 1.

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

Menutup modal:

Setel bodyoverflow keauto

Setel bodylebar keauto

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

Terinspirasi oleh: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

jpap
sumber

Saya mendapatkan layar "gelisah" karena tidak memiliki istilah yang lebih baik dan kunci di sini untuk saya adalah mengikuti pengaturan lebar. Terima kasih banyak.

Hcabnettek

1

@Hcabnettek Yap: "gelisah" == "document reflow". Senang itu membantu Anda! :-)

jpap

apakah ada solusi css untuk ini? apakah itu berfungsi di semua browser dan seluler?

Ruben

hanya salah ketik: Pasti $body.css("overflow", "auto");di langkah terakhir :)

schneikai

Ya ampun, ide yang luar biasa. @ jpap Anda membantu saya menyelesaikan masalah reflow dokumen yang telah lama mengganggu saya.

Goran Radulovic

17

Peringatan: Opsi di bawah ini tidak relevan dengan Bootstrap v3.0.x, karena menggulir dalam versi tersebut secara eksplisit terbatas pada modal itu sendiri. Jika Anda menonaktifkan acara roda, Anda mungkin secara tidak sengaja mencegah beberapa pengguna melihat konten dalam modals yang memiliki ketinggian lebih tinggi dari tinggi viewport.

Namun Pilihan Lain: Acara Roda

Acara gulir tidak dapat dibatalkan. Namun dimungkinkan untuk membatalkan roda mouse dan acara roda . Peringatan besarnya adalah bahwa tidak semua browser lawas mendukungnya, Mozilla baru-baru ini menambahkan dukungan untuk yang terakhir di Gecko 17.0. Saya tidak tahu penyebaran penuh, tetapi IE6 + dan Chrome mendukungnya.

Berikut cara memanfaatkannya:

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

JSFiddle

merv
sumber

JSFiddle Anda tidak berfungsi di Firefox 24, Chrome 24 atau di IE9.

AxeEffect

@AxeEffect seharusnya berfungsi sekarang. Satu-satunya masalah adalah bahwa referensi eksternal ke pustaka Bootstrap telah berubah. Terimakasih atas peringatannya.

merv

2

Ini tidak mencegah perangkat sentuh untuk bergulir, overflow:hiddenlebih baik untuk saat ini.

Webinan

5

semuanya berfungsi tetapi tidak untuk perangkat seluler. -__- Diuji Android 4.1 dan Chrome

Tower Jimmy

@TowerJimmy Anda mungkin perlu membatalkan sentuhan atau seret acara untuk itu (jika itu mungkin)

xorinzor

9

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function theMouseWheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});

jparkerweb
sumber

9

Tidak dapat membuatnya berfungsi di Chrome hanya dengan mengubah CSS, karena saya tidak ingin halaman tersebut bergulir kembali ke atas. Ini bekerja dengan baik:

$("#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);
});

tetsuo
sumber

1

ini adalah satu-satunya solusi yang bekerja untuk saya di bootstrap 3.2.

volx757

1

Punya lompatan ke atas masalah dengan sidenavs bahan sudut. Ini adalah satu-satunya jawaban yang tampaknya berfungsi dalam semua kasus (desktop / seluler + izinkan gulir di modal / sidenav + biarkan posisi gulir tubuh tetap tanpa melompat).

cYrixmorten

Ini juga satu-satunya solusi yang benar-benar bekerja untuk saya. tx

Deedz

bekerja untuk saya, bootstrap v4

Deano

9

Coba yang ini:

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

itu berhasil untuk saya. (mendukung IE8)

fatCop
sumber

4

Ini berfungsi tetapi juga menyebabkan Anda melompat ke atas ketika Anda membuka modal saat menggunakan position: fixed.

AlexioVay

8

Untuk Bootstrap , Anda dapat mencoba ini (bekerja Firefox, Chromedan Microsoft Edge):

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

Semoga ini membantu...

Murat Yıldız
sumber

7

Menambahkan kelas 'is-modal-open' atau memodifikasi gaya tag tubuh dengan javascript tidak apa-apa dan itu akan berfungsi sebagaimana mestinya. Tetapi masalah yang akan kita hadapi adalah ketika tubuh menjadi meluap: tersembunyi, itu akan melompat ke atas, (scrollTop akan menjadi 0). Ini akan menjadi masalah kegunaan nanti.

Sebagai solusi untuk masalah ini, alih-alih mengubah overflow tag tubuh: sembunyikan dengan tag html

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

Jassim Abdul Latheef
sumber

1

Ini benar-benar jawaban yang benar karena jawaban konsensus umum menggulir halaman ke atas yang merupakan pengalaman pengguna yang mengerikan. Anda harus menulis blog tentang ini. Saya akhirnya mengubah ini menjadi solusi global.

Smith

Ini tidak akan berfungsi di iphone.

BadriNarayanan Sridharan

6

Saya tidak yakin tentang kode ini, tetapi patut dicoba.

Di jQuery:

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

Seperti yang saya katakan sebelumnya, saya tidak 100% yakin tetapi coba saja.

Anish Gupta
sumber

1

Ini tidak mencegah tubuh dari menggulir saat modal dibuka

xorinzor

@xorinzor Anda menyatakan di bagian komentar dari jawaban charlietfl bahwa ini berfungsi. Tapi Anda berkata: Ini tidak mencegah tubuh dari menggulir saat modal dibuka.

Anish Gupta

benar tetapi untuk sekarang ini adalah satu-satunya solusi yang berfungsi dan saya tidak keberatan. alasan mengapa saya menandai jawabannya sebagai jawaban adalah karena dia sebelumnya dengan jawabannya.

xorinzor

@xorinzor sungguh, saya pikir saya menjawab sebelum dia, mungkin ada beberapa kesalahan aneh. tidak apa-apa

Anish Gupta

5

Pada November 2017 Chrome Memperkenalkan properti css baru

overscroll-behavior: contain;

yang memecahkan masalah ini meskipun pada saat penulisan telah membatasi dukungan lintas browser.

lihat tautan di bawah untuk detail lengkap dan dukungan browser

pengguna1095118
sumber

4

Solusi terbaik adalah solusi css-only yang body{overflow:hidden}digunakan oleh sebagian besar jawaban ini. Beberapa jawaban menyediakan perbaikan yang juga mencegah "lompatan" yang disebabkan oleh scrollbar yang menghilang; Namun, tidak ada yang terlalu elegan. Jadi, saya menulis dua fungsi ini, dan tampaknya berfungsi dengan baik.

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');
}

Lihat jsFiddle ini untuk melihatnya digunakan.

Stephen M. Harris
sumber

Ini tidak terlalu tua tetapi tidak ada yang bekerja sama sekali untuk saya bahkan biola saya masih dapat menggulir jendela, apa yang saya lewatkan?

mendarat

Buka dan Tutup modal beberapa kali, dan DIV hijau utama menyusut dan menyusut!

Webinan

@Webinan Saya tidak melihat ini di Chrome di Win7. Berapa ukuran browser dan viewport Anda?

Stephen M. Harris

1

@smhmic setelah sekitar 20 kali membuka dan menutup lebar div hijau menjadi sama dengan open modallebar tombol. Chrome pada 8

Webinan

Mirip dengan jawaban @ jpap ( stackoverflow.com/a/16451821/5516499 ) tetapi dengan bug tambahan. :-(

Kivi Shapiro

4

Banyak yang menyarankan "overflow: hidden" di badan, yang tidak akan berfungsi (setidaknya dalam kasus saya), karena itu akan membuat situs web gulir ke atas.

Ini adalah solusi yang berfungsi untuk saya (baik di ponsel dan komputer), menggunakan 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');
    });

Ini akan membuat pengguliran modal untuk bekerja, dan mencegah situs web dari menggulir pada saat yang sama.

Danie
sumber

Sepertinya solusi ini memperbaiki bug iOS ini juga: hackernoon.com/...

Gotenks

3

Anda dapat menggunakan logika berikut, saya mengujinya dan berfungsi (bahkan di 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>

Myriacl
sumber

2

Saya tidak 100% yakin ini akan bekerja dengan Bootstrap tetapi patut dicoba - ini bekerja dengan Remodal.js yang dapat ditemukan di github: http://vodkabears.github.io/remodal/ dan masuk akal untuk metode ini menjadi sangat mirip.

Untuk menghentikan melompat halaman ke atas dan juga mencegah pergeseran konten yang tepat, tambahkan kelas ke bodysaat modal dipecat dan setel aturan CSS ini:

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

Ini position:staticdan height:autoyang bergabung untuk menghentikan lompatan konten ke kanan. The overflow-y:hidden;berhenti halaman dari menjadi digulir balik modal tersebut.

AdamJB
sumber

Solusi ini sangat cocok untuk saya di Safari 11.1.1, Chrome 67.0.3396.99 dan Firefox 60.0.2. Terima kasih!

Dom

2

Berdasarkan biola ini: http://jsfiddle.net/dh834zgw/1/

cuplikan berikut (menggunakan jquery) akan menonaktifkan gulir jendela:

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

Dan di css Anda:

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

Sekarang ketika Anda menghapus modal, jangan lupa untuk menghapus kelas noscroll pada tag html:

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

ling
sumber

Bukankah overflowseharusnya diatur hidden? +1 meskipun ini bekerja untuk saya (menggunakan hidden).

mhulse

2

Saya memiliki bilah sisi yang dihasilkan oleh hack kotak centang. Tetapi ide utamanya adalah untuk menyimpan dokumen scrollTop dan tidak mengubahnya saat menggulir jendela.

Saya hanya tidak suka halaman melompat ketika tubuh menjadi 'meluap: disembunyikan'.

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);
            }
        });
    })

});

Luaskan cuplikan

Lozhachevskaya Anastasiya
sumber

2

Sayangnya tidak ada jawaban di atas yang memperbaiki masalah saya.

Dalam situasi saya, halaman web awalnya memiliki bilah gulir. Setiap kali saya mengklik modal, bilah gulir tidak akan hilang dan header akan bergerak ke kanan sedikit.

Kemudian saya mencoba menambahkan .modal-open{overflow:auto;}(yang direkomendasikan kebanyakan orang). Memang memperbaiki masalah: bilah gulir muncul setelah saya membuka modal. Namun, efek samping lain yang muncul adalah bahwa "latar belakang di bawah header akan bergerak sedikit ke kiri, bersama dengan bar panjang lain di belakang modal"

Untungnya, setelah saya tambahkan {padding-right: 0 !important;}, semuanya diperbaiki dengan sempurna. Baik header dan latar belakang tubuh tidak bergerak dan modal masih menyimpan scrollbar.

Semoga ini bisa membantu mereka yang masih terjebak dengan masalah ini. Semoga berhasil!

Bocard Wang
sumber

1

Sebagian besar bagian ada di sini, tetapi saya tidak melihat jawaban yang menyatukan semuanya.

Masalahnya tiga kali lipat.

(1) mencegah gulir halaman yang mendasarinya

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

(2) dan hapus bilah gulir

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

(3) bersihkan saat modal diberhentikan

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

Jika modal tidak layar penuh maka terapkan .modal binding ke overlay layar penuh.

evoskuil
sumber

4

Ini juga mencegah pengguliran dalam modal.

Daniel

Permasalahan yang sama. Apakah Anda menemukan solusinya? @Daniel

AlexioVay

@Vay Sort of. Lihat ini: blog.christoffer.me/…

Daniel

1

Solusi saya untuk Bootstrap 3:

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

karena bagi saya satu-satunya overflow: hiddendi body.modal-openkelas tidak mencegah halaman bergeser ke kiri karena aslinya margin-right: 15px.

pierrea
sumber

1

Saya hanya melakukannya dengan cara ini ...

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

Tetapi ketika scroller menghilang itu memindahkan semuanya dengan benar 20px, jadi saya menambahkan

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

langsung setelah itu.

Bekerja untukku.

Jurang
sumber

Ini hanya berfungsi jika modal lebih kecil dari ukuran layar.

Sergey

1

Jika modal 100% tinggi / lebar "mouseenter / leave" akan bekerja dengan mudah mengaktifkan / menonaktifkan gulir. Ini benar-benar berhasil bagi saya:

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); 
});

Mats
sumber

1

bekerja untukku

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

namal
sumber

1

Mengapa tidak melakukan itu seperti yang dilakukan Bulma? Ketika modal-aktif maka tambahkan ke html kelas mereka .is-terpotong yang melimpah: tersembunyi! Penting; Dan itu saja.

Sunting: Oke, Bulma memiliki bug ini, jadi Anda harus menambahkan juga hal-hal lain seperti

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

nrkz
sumber

1

Karena bagi saya masalah ini disajikan terutama di iOS, saya memberikan kode untuk memperbaikinya hanya di 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;
    });
  }

Teori LowField
sumber

1

Tidak ada jawaban di atas yang bekerja dengan baik untuk saya. Jadi saya menemukan cara lain yang bekerja dengan baik.

Hanya menambahkan scroll.(namespace)pendengar dan set scrollTopdaridocument ke terbaru dari nilai itu ...

dan juga menghapus pendengar di skrip dekat Anda.

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {

  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

memperbarui

sepertinya, ini tidak berfungsi dengan baik pada chrome. ada saran untuk memperbaikinya?

Pars
sumber

0

Ini bekerja untuk saya:

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

Gerhard Liebenberg
sumber

0

Bagi mereka yang bertanya-tanya bagaimana cara mendapatkan acara gulir untuk modal bootstrap 3:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

Arie
sumber

Cegah BODY agar tidak menggulir saat modal dibuka

Jawaban:

Membuka modal:

Menutup modal:

Namun Pilihan Lain: Acara Roda

JSFiddle

memperbarui