Tôi đã tìm kiếm một giải pháp loại "hộp đèn" cho phép điều này nhưng chưa tìm thấy giải pháp nào (xin vui lòng, đề nghị nếu bạn biết về bất kỳ).

Hành vi tôi đang cố gắng tạo lại giống như những gì bạn thấy trên Pinterest khi nhấp vào hình ảnh. Lớp phủ có thể cuộn được ( vì trong toàn bộ lớp phủ di chuyển lên như một trang trên đầu trang ) nhưng phần thân phía sau lớp phủ được cố định.

Tôi đã cố gắng tạo cái này chỉ bằng CSS ( tức là divlớp phủ trên cùng của toàn bộ trang và thân máyoverflow: hidden ), nhưng nó không ngăn divđược cuộn.

Làm cách nào để giữ cho phần thân / trang không bị cuộn nhưng vẫn tiếp tục cuộn bên trong thùng chứa toàn màn hình?

Học thuyết

Nhìn vào triển khai hiện tại của trang pinterest (nó có thể thay đổi trong tương lai), khi bạn mở lớp phủ, một noscrolllớp được áp dụng cho bodyphần tử và overflow: hiddenđược đặt, do đó bodykhông thể cuộn được nữa.

Lớp phủ (tạo on-the-fly hoặc đã được bên trong trang và làm có thể nhìn thấy qua display: block, nó làm cho không có sự khác biệt) có position : fixedvà overflow-y: scroll, với top, left, rightvà bottomthuộc tính được gán 0: phong cách này làm cho lớp phủ lấp đầy toàn bộ khung nhìn.

Thay divvào đó, lớp phủ bên trong thay vào đó chỉ là position: staticthanh cuộn dọc mà bạn thấy có liên quan đến yếu tố đó. Kết quả là nội dung có thể cuộn được nhưng lớp phủ vẫn cố định.

Khi bạn đóng thu phóng, bạn ẩn lớp phủ (thông qua display: none) và sau đó bạn cũng có thể xóa hoàn toàn thông qua javascript (hoặc chỉ nội dung bên trong, tùy thuộc vào cách bạn tiêm nó).

Bước cuối cùng, bạn cũng phải xóa noscrolllớp thành body(để thuộc tính tràn trở về giá trị ban đầu)

Mã

Ví dụ về Codepen

(nó hoạt động bằng cách thay đổi aria-hiddenthuộc tính của lớp phủ để hiển thị và ẩn nó và để tăng khả năng truy cập của nó).

Đánh dấu
(nút mở)

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

(lớp phủ và nút đóng)

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

});

Cuối cùng, đây là một ví dụ khác trong đó lớp phủ mở ra với hiệu ứng mờ dần bởi CSS transitionđược áp dụng cho thuộc opacitytính. Ngoài ra a padding-rightđược áp dụng để tránh hiện tượng chỉnh lại dòng chữ bên dưới khi thanh cuộn biến mất.

Ví dụ Codepen (fade)

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

Nếu bạn muốn ngăn chặn quá mức trên ios, bạn có thể thêm vị trí cố định vào lớp .noscroll của mình

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

Đừng sử dụng overflow: hidden;vào body. Nó tự động cuộn mọi thứ lên trên cùng. Không cần JavaScript. Tận dụng overflow: auto;. Giải pháp này thậm chí hoạt động với Safari di động:

Cấu trúc HTML

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

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

Tạo kiểu

.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;
}

Xem bản demo ở đây và mã nguồn ở đây .

Cập nhật:

Đối với những người muốn thanh không gian bàn phím, trang lên / xuống hoạt động: bạn cần tập trung vào lớp phủ, ví dụ: nhấp vào nó hoặc JS thủ công tập trung vào nó trước khi phần này divsẽ phản hồi với bàn phím. Tương tự như khi lớp phủ bị "tắt", vì nó chỉ di chuyển lớp phủ sang một bên. Mặt khác với trình duyệt, đây chỉ là hai divs bình thường và nó sẽ không biết tại sao nó nên tập trung vào bất kỳ một trong số chúng.

overscroll-behavior thuộc tính css cho phép ghi đè hành vi cuộn tràn mặc định của trình duyệt khi đạt đến đỉnh / đáy của nội dung.

Chỉ cần thêm các kiểu sau vào lớp phủ:

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

Bản demo Codepen

Hiện đang hoạt động trong Chrome, Firefox và IE ( caniuse )

Để biết thêm chi tiết kiểm tra bài viết của nhà phát triển google .

Hầu hết các giải pháp đều có vấn đề là chúng không giữ được vị trí cuộn, vì vậy tôi đã xem qua cách Facebook thực hiện. Ngoài việc đặt nội dung bên dưới, position: fixedhọ cũng tự động đặt phần trên cùng để giữ vị trí cuộn:

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

Sau đó, khi bạn xóa lớp phủ một lần nữa, bạn cần đặt lại vị trí cuộn:

window.scrollTo(0, scrollPosition);

Tôi đã tạo một ví dụ nhỏ để chứng minh giải pháp này

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>

Điều đáng chú ý là đôi khi việc thêm "tràn: ẩn" vào thẻ body không thực hiện được công việc. Trong những trường hợp đó, bạn cũng sẽ phải thêm thuộc tính vào thẻ html.

html, body {
    overflow: hidden;
}

Nói chung, nếu bạn muốn cha mẹ (cơ thể trong trường hợp này) ngăn không cho nó cuộn khi một đứa trẻ (lớp phủ trong trường hợp này) cuộn, sau đó làm cho đứa trẻ trở thành anh chị em của cha mẹ để ngăn sự kiện cuộn lên cha mẹ Trong trường hợp cha mẹ là cơ thể, điều này đòi hỏi một yếu tố gói bổ sung:

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

Xem Cuộn nội dung DIV cụ thể với thanh cuộn chính của trình duyệt để xem nó hoạt động.

Câu trả lời được chọn là đúng, nhưng có một số hạn chế:

• "Flings" siêu cứng bằng ngón tay của bạn vẫn sẽ cuộn <body> trong nền
• Mở bàn phím ảo bằng cách nhấn <input>vào một chế độ sẽ hướng tất cả các cuộn trong tương lai tới<body>

Tôi không có cách khắc phục cho vấn đề đầu tiên, nhưng muốn làm sáng tỏ vấn đề thứ hai. Thật khó hiểu, Bootstrap từng có tài liệu về vấn đề bàn phím, nhưng họ tuyên bố rằng nó đã được sửa, trích dẫn http://output.jsbin.com/cacido/quiet làm ví dụ về cách khắc phục.

Thật vậy, ví dụ đó hoạt động tốt trên iOS với các thử nghiệm của tôi. Tuy nhiên, việc nâng cấp nó lên Bootstrap mới nhất (v4) sẽ phá vỡ nó.

Trong nỗ lực tìm ra sự khác biệt giữa chúng là gì, tôi đã giảm một trường hợp thử nghiệm để không còn phụ thuộc vào Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .

Các yếu tố quyết định là kỳ quái. Tránh vấn đề bàn phím dường như yêu cầu background-color không được đặt trên thư mục gốc <div>có chứa phương thức và nội dung của phương thức phải được lồng trong một cái khác <div>, có thể được background-colorđặt.

Để kiểm tra nó, bỏ ghi chú dòng dưới đây trong ví dụ 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; */
}

Đối với các thiết bị cảm ứng, hãy thử thêm một 101vhdiv trong suốt chiều rộng tối thiểu 1px trong trình bao bọc của lớp phủ. Sau đó thêm-webkit-overflow-scrolling:touch; overflow-y: auto; vào trình bao bọc. Thủ thuật này giúp safari di động nghĩ rằng lớp phủ có thể cuộn được, do đó chặn sự kiện chạm từ cơ thể.

Đây là một trang mẫu. Mở trên safari di động: http : //www.origenfeft.com/overlay.html

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

Hành vi bạn muốn ngăn chặn được gọi là chuỗi cuộn. Để tắt nó, đặt

overscroll-behavior: contain;

trên lớp phủ của bạn trong CSS.

Tôi thấy câu hỏi này đang cố gắng giải quyết vấn đề tôi gặp phải với trang của mình trên Ipad và Iphone - cơ thể đang cuộn khi tôi đang hiển thị div cố định dưới dạng cửa sổ bật lên với hình ảnh.

Một số câu trả lời là tốt, tuy nhiên không ai trong số họ giải quyết vấn đề của tôi. Tôi tìm thấy bài viết trên blog của Christoffer Pettersson. Giải pháp được trình bày ở đó đã giúp tôi giải quyết vấn đề với các thiết bị iOS và nó đã giúp tôi giải quyết vấn đề cuộn nền.

Sáu điều tôi đã học được về cuộn băng cao su của iOS Safari

Như đã đề xuất, tôi bao gồm các điểm chính của bài đăng trên blog trong trường hợp liên kết bị lỗi thời.

"Để vô hiệu hóa người dùng có thể cuộn trang nền trong khi" menu đang mở ", có thể kiểm soát những yếu tố nào sẽ được phép cuộn hoặc không, bằng cách áp dụng một số JavaScript và lớp CSS.

Dựa trên câu trả lời Stackoverflow này, bạn có thể kiểm soát các phần tử với cuộn vô hiệu hóa không được thực hiện hành động cuộn mặc định của chúng khi sự kiện touchmove được kích hoạt. "

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

Và sau đó đặt lớp cuộn vô hiệu hóa trên trang div:

<div class="page disable-scrolling">

Bạn có thể dễ dàng làm điều này với một số css và JQuery "mới".

Ban đầu: body {... overflow:auto;} Với JQuery, bạn có thể tự động chuyển đổi giữa 'lớp phủ' và 'cơ thể'. Khi ở trên 'cơ thể', hãy sử dụng

body {
   position: static;
   overflow: auto;
}

Khi sử dụng 'lớp phủ'

body {
   position: sticky;
   overflow: hidden;
}

JQuery cho công tắc ('cơ thể' -> 'lớp phủ'):

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

JQuery cho công tắc ('lớp phủ' -> 'cơ thể'):

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

Tôi muốn thêm vào các câu trả lời trước vì tôi đã cố gắng làm điều đó và một số bố cục đã bị hỏng ngay khi tôi chuyển cơ thể sang vị trí: đã sửa. Để tránh điều đó, tôi cũng phải đặt chiều cao cơ thể lên 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");
}

Sử dụng HTML sau:

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

Sau đó, JavaScript để chặn và dừng cuộn:

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

Sau đó, để mọi thứ trở lại bình thường:

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

Nếu mục đích là vô hiệu hóa trên thiết bị di động / cảm ứng thì cách đơn giản nhất để thực hiện là sử dụng touch-action: none;.

Thí dụ:

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>

(Ví dụ này không hoạt động trong ngữ cảnh Stack Overflow. Bạn sẽ cần tạo lại nó trong một trang độc lập.)

Nếu bạn muốn vô hiệu hóa cuộn của #appcontainer, chỉ cần thêm touch-action: none;.

thử cái này

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", "");
            });

Nếu bạn muốn dừng cuộn body / html, hãy thêm như sau

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>

Về cơ bản, bạn có thể làm điều đó mà không cần JS.

Ý tưởng chính là thêm html / body với height: 100% và overflow: auto. và bên trong lớp phủ của bạn, bạn có thể bật / tắt cuộn dựa trên yêu cầu của mình.

Hi vọng điêu nay co ich!

Trong trường hợp của tôi, không có giải pháp nào trong số này giải quyết được trên iPhone (iOS 11.0).

Cách khắc phục hiệu quả duy nhất đang hoạt động trên tất cả các thiết bị của tôi là cách khắc phục này - ios-10-safari-ngăn chặn-cuộn-phía sau-một-lớp phủ cố định-và-duy trì-cuộn-vị trí

Sử dụng mã dưới đây để vô hiệu hóa và kích hoạt thanh cuộn.

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