Я намагаюся вимкнути панель прокрутки html / body батьків, коли я використовую лайтбокс. Тут головне слово - відключити . Я не хочу цього приховувати overflow: hidden;.

Причиною цього є те, що overflow: hiddenзмушує сайт стрибати і зайняти область, де був прокрутка.

Я хочу знати, чи можливо відключити смугу прокрутки, поки її показувати.

Якщо сторінку під накладом можна "зафіксувати" вгорі, коли ви відкриєте накладку, яку ви можете встановити

body { position: fixed; overflow-y:scroll }

ви все одно повинні бачити праву панель прокрутки, але вміст не прокручується. Коли ви закриєте накладку, просто поверніть ці властивості за допомогою

body { position: static; overflow-y:auto }

Я просто запропонував цей спосіб лише тому, що вам не потрібно було б змінювати будь-яку подію прокрутки

Оновлення

Ви також можете зробити невелике поліпшення: якщо ви отримаєте document.documentElement.scrollTopвластивість через javascript безпосередньо перед відкриттям шару, ви зможете динамічно призначити це значення як topвластивість елемента body: при такому підході сторінка буде стояти на своєму місці, незалежно від того, чи знову зверху або якщо ви вже прокручували.

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Чотири невеликі доповнення до обраного рішення:

1. Застосовуйте "noscroll" до html замість body, щоб запобігти подвійним смугам прокрутки в IE
2. Щоб перевірити, чи є насправді смуга прокрутки перш ніж додавати клас "noscroll". В іншому випадку сайт також буде стрибати, натиснувши новою смугою прокрутки, що не прокручується.
3. Щоб зберегти будь-який можливий scrollTop, щоб вся сторінка не повернулася до початку (наприклад, оновлення Fabrizio, але вам потрібно схопити значення перед додаванням класу "noscroll")
4. Не всі браузери обробляють scrollTop так само, як це зафіксовано на http://help.dottoro.com/ljnvjiow.php

Повне рішення, яке, здається, працює для більшості браузерів:

CSS

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

Вимкнути прокрутку

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

Увімкнути прокрутку

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

Дякую Фабрізіо та Деяну за те, що мене вивели на правильний шлях та Бродінго за рішення про подвійну смугу прокрутки

З включеною jQuery:

відключити

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

включити

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

використання

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Я ОП

За допомогою відповіді від fcalderan я зміг сформувати рішення. Я залишаю тут своє рішення, оскільки воно чітко пояснює, як його використовувати, і додає дуже важливу деталь,width: 100%;

Додаю цей клас

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

це працювало для мене, і я використовував Fancyapp.

Це спрацювало дуже добре для мене….

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

просто оберніть ці два рядки коду тим, що вирішує, коли ви збираєтеся заблокувати прокрутку.

напр

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Ви не можете відключити подію прокрутки, але ви можете вимкнути пов’язані дії, які призводять до прокрутки, як-от миші та сенсорний рух:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Ви можете приховати смугу прокрутки тіла overflow: hiddenта встановити поле одночасно, щоб вміст не стрибав:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

Після цього ви можете додати на сторінку відключену смугу прокрутки, щоб заповнити проміжок:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

Я зробив саме це для власної реалізації лайтбоксу. Здається, поки що добре працює.

Це рішення, з яким ми пішли. Просто збережіть позицію прокрутки, коли накладка відкрита, прокрутіть її до збереженої позиції кожного разу, коли користувач намагається прокрутити сторінку, і вимкніть слухача, коли накладка закрита.

Це трохи стрибає IE, але працює як шарм у Firefox / Chrome.

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

У мене була подібна проблема: ліве меню, яке, коли воно з’являється, запобігає прокрученню. Як тільки висота була встановлена ​​на 100vh, смуга прокрутки зникла, а вміст смикнувся праворуч.

Тож якщо ви не заперечуєте за тим, щоб увімкнути смугу прокрутки (але встановити вікно на повний зріст, щоб воно насправді нікуди не прокручувалося), тоді ще одна можливість - встановити крихітний нижній край, який дозволить утримувати смуги прокрутки:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

ви можете зберегти переповнення: приховано, але керуйте положення прокрутки вручну:

перед тим, як показати зберегти фактичну позицію прокрутки:

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

це має працювати

Грубим, але робочим способом буде примусити прокрутку повернутися до вершини, тим самим ефективно відключивши прокрутку:

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

Коли ви відкриєте лайтбокс, підніміть прапор і, закривши його, опустіть прапор.

Живий тестовий випадок .

Мені подобається дотримуватися методу "overflow: hidden" і просто додати вкладку-право, що дорівнює ширині смуги прокрутки.

Отримайте функцію ширини смуги прокрутки за допомогою 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 та додайте padding-right to body:

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

Приховуючи, вийміть клас та підкладку:

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

Стиль noscroll як раз такий:

.noscroll { overflow: hidden; }

Зауважте, що якщо у вас є будь-які елементи з позицією: виправлено, вам потрібно додати прокладку і до цих елементів.

<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% від висоти екрана.

Усі модальні / лайтбокс-системи на основі JavaScript використовують переповнення під час відображення модального / лайтбоксу, на html-тезі або тезі body.

Коли відображається лайтбокс, js натискає переповнення, приховане на html або тег body. Коли лайтбокс прихований, деякі видаляють приховані, інші натискають автоматично на переповнення html або тегу body.

Розробники, які працюють на Mac, не бачать проблеми смуги прокрутки.

Просто замініть прихований відмененим, щоб не побачити вміст ковзання під модалом видалення прокрутки.

Лайтбокс відкрити / показати:

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

Лайтбокс закрити / приховати:

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

Якщо сторінку під накладом можна "зафіксувати" вгорі, коли ви відкриєте накладку, яку ви можете встановити

.disableScroll { position: fixed; overflow-y:scroll }

надайте цей клас тілу, що прокручується, ви все одно повинні бачити праву панель прокрутки, але вміст не прокручується.

Щоб зберегти позицію сторінки, зробіть це в jquery

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

Коли ви закриєте накладку, просто поверніть ці властивості за допомогою

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

Я просто запропонував цей спосіб лише тому, що вам не потрібно було б змінювати будь-яку подію прокрутки

Це зупинить вікно перегляду вгору, зберігаючи положення прокрутки та відновивши його при включенні прокрутки.

CSS

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

JS

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

Тепер все, що вам потрібно зробити, це викликати функції

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Ви можете це зробити за допомогою 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.