Предотвратить прокрутку тела при открытии модального

Question

Я хочу, чтобы мое тело перестало прокручиваться при использовании колесика мыши, пока модальное (с http://twitter.github.com/bootstrap) на моем сайте открыто.

Я пытался вызвать фрагмент JavaScript ниже, когда модал открыт, но безуспешно

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

AND

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

Обратите внимание, что на нашем сайте прекращена поддержка IE6, хотя IE7 + должен быть совместимым.

Answer 1

Небольшая заметка для тех, кто в SharePoint 2013. В теле уже есть overflow: hidden.Вам нужно установить overflow: hidden для элемента div с идентификатором s4-workspace, например,

var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";

Answer 2

Я использую эту ванильную функцию js, чтобы добавить "модально открытый" класс в тело. (На основании ответа smhmic)

function freezeScroll(show, new_width)
{
    var innerWidth = window.innerWidth,
        clientWidth = document.documentElement.clientWidth,
        new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px";

    document.body.style.marginRight = new_margin;
    document.body.className = (show) ? "modal-open" : "";
};

Answer 3

Сокрытие переполнения и фиксация положения делает свое дело, однако с моим изменчивым дизайном это будет фиксировать его за шириной браузеров, так что ширина: 100% исправит это.

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

Answer 4

Попробуйте этот код:

$('.entry_details').dialog({
    width:800,
    height:500,
    draggable: true,
    title: entry.short_description,
    closeText: "Zamknij",
    open: function(){
        //    blokowanie scrolla dla body
        var body_scroll = $(window).scrollTop();
        $(window).on('scroll', function(){
            $(document).scrollTop(body_scroll);
        });
    },
    close: function(){
        $(window).off('scroll');
    }
}); 

Answer 5

   $('.modal').on('shown.bs.modal', function (e) {
      $('body').css('overflow-y', 'hidden');
   });
   $('.modal').on('hidden.bs.modal', function (e) {
      $('body').css('overflow-y', '');
   });

Answer 6

Почему бы не сделать это, как Булма? Когда модальный активен, тогда добавьте в html их класс .is-clipped, который переполнен: hidden! Важный; И это все.

Редактировать: Окей, Булма имеет эту ошибку, поэтому вы должны добавить и другие вещи, такие как

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

Answer 7

Использование body-scroll-lock

Очень легкий, очень аккуратный и всплывающий

Answer 8

Что окончательно исправило это для меня, было Блокировка прокрутки тела .

Другие решения не отключают прокрутку на iOS.

Answer 9

Вы должны добавить overflow: hidden в HTML для лучшей кроссплатформенной производительности.

Я бы использовал

html.no-scroll {
    overflow: hidden;
}

Answer 10

Так как для меня эта проблема представлена ​​в основном на 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;
    });
  }