Предотвратить прокрутку тела, но разрешить прокрутку наложения - PullRequest
Новая
       39

Предотвратить прокрутку тела, но разрешить прокрутку наложения

382 голосов
/ 14 февраля 2012

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

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

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

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

Ответы [ 18 ]

1 голос
/ 09 февраля 2016

Используйте следующий 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");

1 голос
/ 08 июня 2014

Я хотел бы добавить к предыдущим ответам, потому что я пытался это сделать, и некоторые раскладки сломались, как только я переключил тело в положение: исправлено. Чтобы избежать этого, мне также пришлось установить рост тела на 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");
}
0 голосов
/ 29 августа 2018

попробуйте 

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", "");
            });
0 голосов
/ 22 ноября 2017

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

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

0 голосов
/ 22 июня 2017

Если целью является отключение на мобильных / сенсорных устройствах, то самый простой способ сделать это - использовать 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;.

0 голосов
/ 24 сентября 2018

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

overscroll-behavior: contain;

на оверлей в CSS.

0 голосов
/ 30 января 2019

Если вы хотите остановить прокрутку 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% и переполнением: авто. и внутри вашего оверлея вы можете включить или отключить прокрутку в зависимости от ваших требований.

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

0 голосов
/ 20 сентября 2016

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

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();
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...