it-roy-ru.com

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

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

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

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

AND

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

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

292
xorinzor

modal Bootstrap автоматически добавляет класс modal-open в тело, когда отображается модальное диалоговое окно, и удаляет его, когда диалоговое окно скрыто. Поэтому вы можете добавить следующее в свой CSS:

body.modal-open {
    overflow: hidden;
}

Вы можете утверждать, что приведенный выше код относится к CSS-базе Bootstrap, но это легко исправить, добавив его на свой сайт.

Обновление 8 февраля 2013 г.
Теперь это перестало работать в Twitter Boostrap v. 2.3.0 - они больше не добавляют класс modal-open в тело.

Обходной путь должен был бы добавить класс к телу, когда модал должен быть показан, и удалить его, когда модал закрыт:

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

Обновление от 11 марта 2013 г. Похоже, класс modal-open вернется в Bootstrap 3.0 явно для предотвращения прокрутки: 

Повторно вводит .modal-open на теле (чтобы мы могли убрать свиток там)

Смотрите это: https://github.com/Twitter/bootstrap/pull/6342 - посмотрите раздел Modal.

418
MartinHN

Принятый ответ не работает на мобильных устройствах (iOS 7, по крайней мере, Safari 7), и я не хочу, чтобы на моем сайте запускался MOAR JavaScript, когда CSS подойдет.

Этот CSS предотвратит прокрутку фоновой страницы под модой:

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

Тем не менее, он также имеет небольшой побочный эффект, по существу, прокручивая к вершине. position:absolute решает эту проблему, но вновь предоставляет возможность прокрутки на мобильном телефоне.

Если вы знаете свой видовой экран ( мой плагин для добавления видового экрана к <body> ), вы можете просто добавить переключатель css для 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; 
}

Я также добавляю это, чтобы предотвратить переход основной страницы влево/вправо при показе/скрытии модалов.

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

этот ответ является X-Post.

103
Brad

Просто скрыть переполнение тела, и это делает тело не прокручивать. Когда вы скрываете модал, верните его в автоматический режим. 

Вот код:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
26
Mehmet Fatih Yıldız

Вы можете попробовать установить размер тела на размер окна с переполнением: скрыто, когда модальное окно открыто.

20
charlietfl

Warning: Опция ниже не относится к Bootstrap v3.0.x, так как прокрутка в этих версиях была явно ограничена самим модалом. Если вы отключите события колеса, вы можете непреднамеренно запретить просмотр некоторых пользователей. содержимое в модальных моделях, высота которых превышает высоту области просмотра.


Еще один вариант: колесные события

Событие scroll не может быть отменено. Однако можно отменить события mousewheel и wheel . Большая оговорка в том, что не все устаревшие браузеры поддерживают их, 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

17
merv

Вам нужно выйти за рамки ответа @ charlietfl и учетной записи для полос прокрутки, в противном случае вы можете увидеть перекомпоновку документа.

Открытие модального:

  1. Запишите ширину body
  2. Установите body переполнение на hidden
  3. Явно установите ширину тела, равную ширине шага 1.

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

Закрытие модального:

  1. Установите body переполнение на auto
  2. Установите для body width значение auto

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

Вдохновленный: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

14
jpap

Попробуй это:

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

это сработало для меня. (поддерживает IE8)

9
fatCop
/* =============================
 * 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(); });
});
8
jparkerweb

Не удалось заставить его работать в Chrome, просто изменив CSS, потому что я не хотел, чтобы страница прокручивалась до самого верха. Это работало нормально:

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

Я не уверен насчет этого кода, но он того стоит.

В jQuery:

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

Как я уже говорил, я не уверен на 100%, но все равно попробую.

6
Anish Gupta

Добавление класса 'is-modal-open' или изменение стиля тега body с помощью javascript - это нормально, и все будет работать так, как должно. Но проблема, с которой мы столкнемся, заключается в том, что тело становится переполненным: скрытое, оно прыгнет наверх (scrollTop станет 0). Это станет проблемой юзабилити позже. 

В качестве решения этой проблемы, вместо изменения переполнения тега body: hidden, измените его на html tag

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

Для Bootstrap , вы можете попробовать это (работая с Firefox, Chrome и Microsoft Edge):

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

Надеюсь это поможет...

3
Murat Yıldız

Лучшее решение - это решение 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 , чтобы увидеть его в использовании.

3
Stephen M. Harris

Вы можете использовать следующую логику, я протестировал ее, и она работает (даже в 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>
3
myriacl

У меня была боковая панель, которая была сгенерирована путем взлома флажка . Но основная идея - сохранить документ 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);
            }
        });
    })

});

2
Lozhachevskaya Anastasiya

К сожалению, ни один из ответов выше не устранил мои проблемы.

В моей ситуации веб-страница изначально имеет полосу прокрутки. Всякий раз, когда я нажимаю на модал, полоса прокрутки не исчезает, а заголовок немного смещается вправо.

Затем я попытался добавить .modal-open{overflow:auto;} (который рекомендовал большинство людей). Это действительно исправило проблемы: полоса прокрутки появляется после того, как я открываю модальное окно. Тем не менее, появляется еще один побочный эффект, который заключается в том, что «фон под заголовком немного сместится влево вместе с еще одним длинным баром позади модального»

 Long bar behind modal

К счастью, после добавления {padding-right: 0 !important;} все исправлено идеально. И заголовок, и фон тела не двигались, а модал все еще сохраняет полосу прокрутки.

 Fixed image

Надеюсь, что это может помочь тем, кто все еще застрял в этой проблеме. Удачи!

2
Bocard Wang

По состоянию на ноябрь 2017 года Chrome представил новую собственность CSS

overscroll-behavior: contain;

который решает эту проблему, хотя на момент написания статьи ограниченная поддержка кросс-браузер.

см. ссылки ниже для получения полной информации и поддержки браузера 

2
user1095118

Многие предлагают «переполнение: скрытый» на теле, которое не будет работать (по крайней мере, в моем случае), так как это заставит сайт прокручиваться вверх.

Это решение, которое работает для меня (как на мобильных телефонах, так и на компьютерах), используя 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');
    });

Это заставит работать модальную прокрутку и предотвратит одновременную прокрутку сайта.

2
Danie

На основе этой скрипки: 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;
 }

Теперь, когда вы удаляете модал, не забудьте удалить класс noscroll в теге html:

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

Если модальное значение - 100% высота/ширина, «mouseenter /ставка» будет работать, чтобы легко включить/отключить прокрутку. Это действительно сработало для меня:

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

Мое решение для Bootstrap 3:

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

потому что для меня единственный overflow: hidden в классе body.modal-open не препятствовал смещению страницы влево из-за оригинального margin-right: 15px.

1
pierrea

Большинство частей здесь, но я не вижу никакого ответа, который бы собрал все воедино.

Проблема тройная.

(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', '')

Если модальный режим не полноэкранный, примените привязки .modal к полноэкранному наложению.

1
evoskuil

Я не уверен на 100%, что это будет работать с Bootstrap, но стоит попробовать - он работал с Remodal.js, который можно найти на github: http://vodkabears.github.io/remodal/ и это будет делать смысл, чтобы методы были довольно похожи.

Чтобы остановить переход страницы наверх, а также предотвратить смещение содержимого вправо, добавьте класс в body при запуске модального режима и установите следующие правила CSS:

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

Это position:static и height:auto, которые объединяются, чтобы остановить переход контента вправо. overflow-y:hidden; останавливает прокручивание страницы за модальным.

1
AdamJB

Я просто сделал это так ...

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

Но когда исчез скроллер, он переместил все правильно на 20 пикселей, поэтому я добавил 

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

сразу после этого.

Работает для меня.

1
Cliff

работал на меня

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

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

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

Я использую эту функцию Vanilla 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" : "";
};
0
Omer M.

Это лучшее решение для меня: 

Css:

.modal {
     overflow-y: auto !important;
}

И Js:

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}
0
ibrahimyilmaz

Используйте body-scroll-lock

Очень легкий, очень аккуратный и популярный

0
adardesign

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

$('.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');
    }
}); 
0
Jarosław Osmólski
   $('.modal').on('shown.bs.modal', function (e) {
      $('body').css('overflow-y', 'hidden');
   });
   $('.modal').on('hidden.bs.modal', function (e) {
      $('body').css('overflow-y', '');
   });
0
Fernando Siqueira

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

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

Это происходит, когда вы используете модал внутри другого модала. Когда я открываю модал внутри другого модала, закрытие последнего удаляет класс modal-open из body. Исправление проблемы зависит от того, как вы закроете последний модал.

Если вы закрываете модал с помощью HTML, как,

<button type="button" class="btn" data-dismiss="modal">Close</button>

Затем вы должны добавить слушателя, как это,

$(modalSelector).on("hidden.bs.modal", function (event) {
    event.stopPropagation();
    $("body").addClass("modal-open");
    return false;
});

Если вы закрываете модальный с помощью JavaScript, как,

$(modalSelector).modal("hide");

Затем вы должны выполнить команду через некоторое время, как это,

setInterval(function(){$("body").addClass("modal-open");}, 300);
0
George Siggouroglou

Для тех, кто интересуется, как получить событие прокрутки для начальной загрузки 3:

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

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

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

0
app developer 27

Это сработало для меня:

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

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

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

html.no-scroll {
    overflow: hidden;
}
0
Afonso

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

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

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

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