Просто отключить прокрутку, а не скрыть это? - PullRequest
Новая
       46

Просто отключить прокрутку, а не скрыть это?

172 голосов
/ 02 января 2012

Я пытаюсь отключить полосу прокрутки html / body родительского элемента, когда использую лайтбокс. Основное слово здесь отключить . Я не хочу скрыть это с overflow: hidden;.

Причина этого в том, что overflow: hidden заставляет сайт прыгать и занимать область, где находился свиток.

Я хочу знать, возможно ли отключить полосу прокрутки, пока она еще отображается.

Ответы [ 16 ]

0 голосов
/ 01 ноября 2018

Во всех модальных / лайтбокс-системах, основанных на javascript, при отображении модального / лайтбокса, html-тега или тега body используется переполнение.

Когда лайтбокс отображается, js вызывает переполнение, скрытое в теге html или body. Когда лайтбокс скрыт, некоторые удаляют скрытый, другие нажимают авто переполнение в HTML или теге body.

Разработчики, работающие на Mac, не видят проблемы с полосой прокрутки.

Просто замените скрытое на unset, чтобы контент не проскальзывал под модальностью удаления полосы прокрутки.

Открыть лайтбокс / показать: 

<html style="overflow: unset;"></html>

Лайтбокс закрыть / скрыть: 

<html style="overflow: auto;"></html>
0 голосов
/ 04 октября 2015

<div id="lightbox"> находится внутри элемента <body>, поэтому при прокрутке лайтбокса вы также прокручиваете тело.Решение состоит в том, чтобы не расширять элемент <body> более чем на 100%, размещать длинное содержимое внутри другого элемента div и добавлять полосу прокрутки, если необходимо, к этому элементу div с помощью overflow: auto. 

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

Теперь прокрутка над лайтбоксом (и даже body) не имеет никакого эффекта, поскольку тело не превышает 100% высоты экрана..

0 голосов
/ 07 августа 2015

Мне нравится придерживаться метода «overflow: hidden» и просто добавить padding-right, равный ширине полосы прокрутки.

Получить функцию ширины полосы прокрутки, lostsource . 

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

При отображении наложения добавьте класс «noscroll» в html и добавьте отступ справа к телу: 

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

При скрытии удалите класс и отступ: 

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

Стиль noscroll выглядит следующим образом: 

.noscroll { overflow: hidden; }

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

0 голосов
/ 02 января 2012

Грубым, но рабочим способом будет принудительная прокрутка вверх, таким образом, эффективно отключая прокрутку: 

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

При открытии лайтбокса поднимите флаг, а при закрытии - опустите флаг.

Живой тестовый кейс .

0 голосов
/ 02 января 2012

вы можете сохранить переполнение: скрыто, но управлять позицией прокрутки вручную:

перед показом сохраняйте трассировку фактической позиции прокрутки: 

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

должно работать

0 голосов
/ 02 января 2012

Вы можете сделать это с помощью Javascript: 

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

И затем отключить его, когда ваш лайтбокс закрыт.

Но если ваш лайтбокс содержит полосу прокрутки, вы не сможетепрокручивать, пока он открыт.Это потому, что window содержит как body, так и #lightbox.Поэтому вы должны использовать архитектуру, подобную следующей: 

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

, а затем применить событие onscroll только к #global.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...