Я искал решение типа "лайтбокс", которое позволяет это, но еще не нашел его (пожалуйста, предложите, если вы знаете что-либо).

Поведение, которое я пытаюсь воссоздать, похоже на то, что вы увидите в Pinterest при нажатии на изображение. Оверлей можно прокручивать (так как в целом оверлей перемещается вверх, как страница вверху страницы ), но тело позади наложения фиксировано.

Я попытался создать это только с помощью CSS ( то есть divналожения поверх всей страницы и телаoverflow: hidden ), но это не мешает divпрокручиваться.

Как предотвратить прокрутку тела / страницы, но прокрутить содержимое внутри полноэкранного контейнера?

теория

Если посмотреть на текущую реализацию сайта-интереса (она может измениться в будущем), когда вы открываете оверлей, noscrollк bodyэлементу применяется класс overflow: hidden, и bodyон больше не прокручивается.

Наложение (созданный на лету или уже внутри страницы и сделать видимыми с помощью display: block, это не имеет никакого значения) имеет position : fixedи overflow-y: scroll, с top, left, rightи bottomсвойства установлено значение 0: этот стиль делает Overlay заполнить всю область просмотра.

divВнутри наложения вместо этого просто в position: staticто вертикальная полоса прокрутки вы видите, связанный с этим элементом. В результате содержимое прокручивается, но наложение остается фиксированным.

Когда вы закрываете масштаб, вы скрываете оверлей (через display: none), а затем вы также можете полностью удалить его через javascript (или только содержимое внутри, это зависит от вас, как его вставить).

В качестве последнего шага вы также должны удалить noscrollкласс в body(поэтому свойство переполнения возвращается к своему начальному значению)

Код

Пример Codepen

(он работает, изменяя aria-hiddenатрибут оверлея, чтобы показать и скрыть его и увеличить его доступность).

Разметка
(кнопка открытия)

<button type="button" class="open-overlay">OPEN LAYER</button>

(наложение и кнопка закрытия)

<section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

Javascript (ваниль-JS)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

И наконец, вот еще один пример, в котором наложение открывается с эффектом постепенного изменения CSS transitionс помощью opacityсвойства. Также padding-rightприменяется a, чтобы избежать перекомпоновки основного текста, когда полоса прокрутки исчезает.

Пример Codepen (исчезает)

CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     top: 0; left: 0; right: 0; bottom: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

Если вы хотите предотвратить чрезмерную прокрутку на ios, вы можете добавить фиксированную позицию в ваш класс .noscroll

body.noscroll{
    position:fixed;
    overflow:hidden;
}

Не используйте overflow: hidden;на body. Он автоматически прокручивает все наверх. Там нет необходимости для JavaScript либо. Использоватьoverflow: auto; . Это решение даже работает с мобильным Safari:

Структура HTML

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

<div class="background-content">
    lengthy content here
</div>

стайлинг

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

Смотрите демо здесь и исходный код здесь .

Обновить:

Для людей, которым нужна клавиша пробела на клавиатуре, страница вверх / вниз работает: вам нужно сосредоточиться на оверлее, например, щелкнув по нему, или вручную JS, сфокусировавшись на нем, прежде чем эта часть divбудет реагировать на клавиатуру. То же самое, когда оверлей «выключен», так как он просто перемещает оверлей в сторону. В противном случае для браузера это всего лишь два нормальных параметра, divи он не знает, почему он должен фокусироваться на каком-либо из них.

overscroll-behavior Свойство css позволяет переопределить поведение прокрутки переполнения браузера по умолчанию при достижении верха / низа контента.

Просто добавьте следующие стили для наложения:

.overlay {
   overscroll-behavior: contain;
   ...
}

Codepen демо

В настоящее время работает в Chrome, Firefox и IE ( caniuse ).

Для более подробной информации обратитесь к статье разработчиков Google .

Большинство решений имеют проблему, заключающуюся в том, что они не сохраняют позицию прокрутки, поэтому я посмотрел, как это делает Facebook. В дополнение к настройке нижележащего содержимого position: fixedони также динамически устанавливают верхнюю часть, чтобы сохранить положение прокрутки:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

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

window.scrollTo(0, scrollPosition);

Я создал небольшой пример, чтобы продемонстрировать это решение

let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}

function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>

  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  
  <button class="toggle">Overlay</button>

Стоит отметить, что иногда добавление «overflow: hidden» к тегу body не помогает. В этих случаях вам также необходимо добавить свойство в тег html.

html, body {
    overflow: hidden;
}

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

<div id="content">
</div>
<div id="overlay">
</div>

См. Прокрутка определенного содержимого DIV с помощью главной полосы прокрутки браузера, чтобы увидеть его работу.

Выбранный ответ правильный, но имеет некоторые ограничения:

• Сверхтвердые «взмахи» пальцем все равно будут прокручиваться <body>на заднем плане
• Если вы откроете виртуальную клавиатуру нажатием <input>в модальном меню, все будущие прокрутки будут направлены на<body>

У меня нет решения для первой проблемы, но я хотел пролить свет на второй вопрос. Смущает, что Bootstrap раньше документировал проблему с клавиатурой, но они утверждали, что она была исправлена, ссылаясь на http://output.jsbin.com/cacido/quiet в качестве примера исправления.

Действительно, этот пример отлично работает на iOS с моими тестами. Тем не менее, обновление до последней Bootstrap (v4) ломает его.

В попытке выяснить, в чем разница между ними, я сократил контрольный пример, чтобы он больше не зависел от Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .

Решающие факторы странные. Чтобы избежать проблемы с клавиатурой, требуется, чтобы background-color она не была установлена ​​в корне, <div>содержащем модал, а содержимое модала должно быть вложено в другой <div>, который может иметьbackground-color установлен.

Чтобы проверить это, раскомментируйте следующую строку в примере Codepen:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Для сенсорных устройств попробуйте добавить 101vhпрозрачный div минимальной высоты шириной 1px в оболочку наложения. Затем добавьте-webkit-overflow-scrolling:touch; overflow-y: auto; в обертку. Это обманывает мобильное сафари, заставляя думать, что оверлей можно прокручивать, перехватывая событие касания от тела.

Вот пример страницы. Открыть на мобильном сафари: http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

Поведение, которое вы хотите предотвратить, называется цепочкой прокрутки. Чтобы отключить его, установите

overscroll-behavior: contain;

на вашем оверлее в CSS.

Я обнаружил, что этот вопрос пытается решить проблему с моей страницей на Ipad и Iphone - тело прокручивалось, когда я отображал фиксированный div в виде всплывающего окна с изображением.

Некоторые ответы хорошие, но ни один из них не решил мою проблему. Я нашел следующее сообщение в блоге Кристоффера Петтерссона. Представленное там решение помогло решить проблему с iOS-устройствами и помогло решить проблему с прокруткой.

Шесть вещей, которые я узнал о прокрутке резиновой ленты в iOS Safari

Как было предложено, я включаю основные пункты в блоге на случай, если ссылка устарела.

«Чтобы отключить возможность прокрутки фоновой страницы, когда« открыто меню », можно контролировать, какие элементы следует прокручивать или нет, применяя некоторые JavaScript и класс CSS.

На основе этого ответа Stackoverflow вы можете контролировать, что элементы с отключенной прокруткой не должны выполнять свое действие прокрутки по умолчанию при срабатывании события touchmove. "

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

А затем поместите класс disable-scrolling на страницу div:

<div class="page disable-scrolling">

Вы можете легко сделать это с некоторыми "новыми" CSS и JQuery.

Первоначально: body {... overflow:auto;} с JQuery вы можете динамически переключаться между «наложением» и «телом». Когда на «тело», используйте

body {
   position: static;
   overflow: auto;
}

Когда на наложении использовать

body {
   position: sticky;
   overflow: hidden;
}

JQuery для коммутатора ('body' -> 'overlay'):

$("body").css({"position": "sticky", "overflow": "hidden"});

JQuery для коммутатора ('overlay' -> 'body'):

$("body").css({"position": "static", "overflow": "auto"});

Я хотел бы добавить к предыдущим ответам, потому что я пытался сделать это, и некоторая раскладка сломалась, как только я переключил тело в положение: исправлено. Чтобы избежать этого, мне также пришлось установить рост тела на 100%:

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

Используйте следующий HTML:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

Затем JavaScript для перехвата и остановки прокрутки:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

Затем, чтобы вернуть вещи в нормальное русло:

$(".page").off("touchmove");

Если целью является отключение на мобильных / сенсорных устройствах, то самый простой способ сделать это - использовать touch-action: none;.

Пример:

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

(Пример не работает в контексте переполнения стека. Вам нужно будет воссоздать его на отдельной странице.)

Если вы хотите отключить прокрутку #appконтейнера, просто добавьте touch-action: none;.

попробуй это

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

Если вы хотите остановить прокрутку body / html, добавьте следующее

CSS

    html, body {
        height: 100%;
    }

    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }

HTML

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

    <div class="background-content">
        lengthy content here
    </div>

В принципе, вы могли бы сделать это без JS.

Основная идея заключается в добавлении html / body с высотой: 100% и переполнением: авто. и внутри вашего оверлея вы можете включить или отключить прокрутку в зависимости от ваших требований.

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

В моем случае ни одно из этих решений не работало на iPhone (iOS 11.0).

Единственное эффективное исправление, которое работает на всех моих устройствах - это ios-10-safari-предотвращать прокрутку за фиксированным наложением и поддерживать прокрутку

Используйте код ниже для отключения и включения полосы прокрутки.

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();