ฉันกำลังพยายามปิดใช้งานแถบเลื่อน html / body ของผู้ปกครองในขณะที่ฉันกำลังใช้ Lightbox คำหลักที่นี่คือปิดการใช้งาน ฉันไม่ได้overflow: hidden;ต้องการที่จะซ่อนมันด้วย

สาเหตุของสิ่งนี้คือoverflow: hiddenทำให้ไซต์กระโดดและใช้พื้นที่ในการเลื่อน

ฉันต้องการทราบว่ามันเป็นไปได้ที่จะปิดการใช้งานแถบเลื่อนในขณะที่ยังคงแสดงมัน

หากหน้าภายใต้การซ้อนทับสามารถ "แก้ไข" ที่ด้านบนเมื่อคุณเปิดการซ้อนทับคุณสามารถตั้งค่า

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

คุณยังควรเห็นแถบเลื่อนด้านขวา แต่เนื้อหาไม่สามารถเลื่อนได้ เมื่อคุณปิดการซ้อนทับเพียงแค่คืนค่าคุณสมบัติเหล่านี้ด้วย

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

ฉันเพิ่งเสนอวิธีนี้เท่านั้นเพราะคุณไม่จำเป็นต้องเปลี่ยนเหตุการณ์การเลื่อนใด ๆ

ปรับปรุง

นอกจากนี้คุณยังสามารถปรับปรุงเล็กน้อย: ถ้าคุณได้รับdocument.documentElement.scrollTopคุณสมบัติผ่านทางจาวาสคริปต์ก่อนที่จะเปิดเลเยอร์คุณสามารถกำหนดค่านั้นเป็นtopคุณสมบัติขององค์ประกอบร่างกายแบบไดนามิก: ด้วยวิธีนี้หน้าเว็บจะเข้ามาแทนที่ไม่ว่าคุณจะ ' อยู่ด้านบนหรือถ้าคุณเลื่อนไปแล้ว

css

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

JS

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

สี่เพิ่มเติมเล็กน้อยในโซลูชันที่เลือก:

1. ใช้ 'noscroll' กับhtml แทน bodyเพื่อป้องกัน double scroll bars ใน 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);

ขอบคุณ Fabrizio และ Dejan ที่ให้ฉันไปในเส้นทางที่ถูกต้องและ Brodingo เพื่อหาทางแก้ปัญหาที่แถบเลื่อนคู่

ด้วย jQuery inluded:

ปิดการใช้งาน

$.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();

ฉันเป็น OP

ด้วยความช่วยเหลือของคำตอบจาก 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);
});

คุณไม่สามารถปิดใช้งานเหตุการณ์เลื่อน แต่คุณสามารถปิดใช้งานการกระทำที่เกี่ยวข้องซึ่งนำไปสู่การเลื่อนเช่นเมาส์วีลและ touchmove:

$('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";
        }
    }
};

เมื่อคุณเปิดไลท์บ็อกซ์ยกธงและเมื่อปิดให้ลดธงลง

กรณีทดสอบสด

ฉันชอบที่จะใช้วิธีการ "ล้น: ซ่อน" และเพียงเพิ่มการเติมขวาที่เท่ากับความกว้างของแถบเลื่อน

ฟังก์ชั่นได้รับความกว้างของแถบเลื่อนโดย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; }

โปรดทราบว่าหากคุณมีองค์ประกอบใด ๆ ที่มีตำแหน่ง: แก้ไขคุณต้องเพิ่มช่องว่างภายในองค์ประกอบเหล่านั้นด้วย

<div id="lightbox">อยู่ใน<body>องค์ประกอบดังนั้นเมื่อคุณเลื่อนไลท์บ็อกซ์คุณจะเลื่อนร่างกายด้วย การแก้ปัญหาคือการไม่ขยาย<body>องค์ประกอบมากกว่า 100% ที่จะวางเนื้อหายาวภายในอีกdivองค์ประกอบและเพื่อเพิ่มแถบเลื่อนถ้าจำเป็นในการนี้องค์ประกอบด้วยdivoverflow: 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>

ทีนี้การเลื่อนไปที่ Lightbox (และปุ่มอื่นbodyๆ ) ก็ไม่มีผลเพราะตัวเครื่องไม่สูงกว่า 100% ของความสูงของหน้าจอ

ระบบที่ใช้จาวาสคริปต์แบบโมดอล / ไลต์บ็อกซ์ทั้งหมดใช้งานมากเกินเมื่อแสดงโมดอล / ไลท์บ็อกซ์บนแท็ก html หรือแท็กเนื้อหา

เมื่อแสดงไลท์บ็อกซ์ js จะผลักโอเวอร์โฟลว์ที่ซ่อนอยู่บน html หรือแท็กเนื้อหา เมื่อไลท์บ็อกซ์ถูกซ่อนบางคนก็เอาสิ่งที่ซ่อนอยู่อื่น ๆ ผลักดันโอเวอร์โฟลอัตโนมัติบน html หรือแท็กเนื้อหา

นักพัฒนาที่ทำงานบน Mac ไม่เห็นปัญหาของแถบเลื่อน

เพียงแทนที่สิ่งที่ซ่อนไว้โดยไม่ได้ตั้งค่าเพื่อไม่ให้เห็นเนื้อหาลื่นไถลภายใต้คำกริยาของการลบแถบเลื่อน

Lightbox เปิด / แสดง:

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

Lightbox ปิด / ซ่อน:

<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));

ฉันเพิ่งเสนอวิธีนี้เท่านั้นเพราะคุณไม่จำเป็นต้องเปลี่ยนเหตุการณ์การเลื่อนใด ๆ

สิ่งนี้จะหยุด viewport ที่กระโดดไปด้านบนโดยการบันทึกตำแหน่งการเลื่อนและการคืนค่าเมื่อเปิดใช้งานการเลื่อน

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();
});

อีกวิธีหนึ่งในการกำจัดการข้ามเนื้อหาบนคำกริยาคงที่เมื่อลบการเลื่อนเนื้อหาคือการทำให้ความกว้างของหน้าเป็นปกติ:

body {width: 100vw; overflow-x: hidden;}

จากนั้นคุณสามารถเล่นกับตำแหน่งคงที่หรือล้น: ซ่อนสำหรับร่างกายเมื่อเป็นกิริยาช่วยเปิด แต่มันจะซ่อนแถบเลื่อนแนวนอน - โดยปกติแล้วพวกมันไม่จำเป็นในเว็บไซต์ที่ตอบสนอง

คุณสามารถทำได้ด้วย Javascript:

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

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

จากนั้นปิดใช้งานเมื่อไลท์บ็อกซ์ของคุณปิด

แต่ถ้า Lightbox ของคุณมีแถบเลื่อนคุณจะไม่สามารถเลื่อนได้ในขณะที่เปิดอยู่ นี้เป็นเพราะwindowมีทั้งและbody #lightboxดังนั้นคุณต้องใช้สถาปัตยกรรมเหมือนดังต่อไปนี้:

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

และจากนั้นให้ใช้เหตุการณ์เฉพาะในonscroll#global