숨기지 않고 스크롤을 비활성화 하시겠습니까?

숨기지 않고 스크롤을 비활성화 하시겠습니까?

---

라이트 박스를 사용하는 동안 부모의 html / body 스크롤 막대를 비활성화하려고합니다. 여기서 주요 단어는 disable 입니다. 나는 그것을 숨기고 싶지 않습니다overflow: hidden; .

그 이유 overflow: hidden는 사이트가 점프하고 스크롤이 있던 영역을 차지하기 때문입니다.

스크롤 막대를 계속 표시하면서 비활성화 할 수 있는지 알고 싶습니다.

---

오버레이 아래의 페이지를 상단에 "고정"할 수있는 경우 오버레이를 열 때 설정할 수 있습니다

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

여전히 오른쪽 스크롤 막대가 표시되지만 내용을 스크롤 할 수는 없습니다. 오버레이를 닫으면이 속성을

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

스크롤 이벤트를 변경할 필요가 없기 때문에이 방법을 제안했습니다.

최신 정보

document.documentElement.scrollTop레이어를 열기 직전에 자바 스크립트를 통해 속성을 가져 오면 해당 값을 topbody 요소의 속성 으로 동적으로 할당 할 수 있습니다 .이 방법을 사용하면 페이지를 원하는 위치에 배치 할 수 있습니다 맨 위로 또는 이미 스크롤 한 경우.

CSS

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

JS

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

---

선택한 솔루션에 4 가지 추가 사항 :

1. IE에서 이중 스크롤 막대를 방지하기 위해 본문 대신 HTML에 'noscroll'을 적용하십시오.
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가 포함 된 경우 :

---

비활성화

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

---

overflow : hidden을 유지하면서 스크롤 위치를 수동으로 관리 할 수 ​​있습니다.

실제 스크롤 위치 추적을 표시하기 전에 :

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

라이트 박스를 열면 깃발을 올리고 닫을 때 깃발을 내립니다.

라이브 테스트 사례 .

---

I like to stick to the "overflow: hidden" method and just add padding-right that's equal to the scrollbar width.

Get scrollbar width function, by 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;
}

When showing the overlay, add "noscroll" class to html and add padding-right to body:

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

When hiding, remove the class and padding:

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

The noscroll style is just this:

.noscroll { overflow: hidden; }

Note that if you have any elements with position:fixed you need to add the padding to those elements too.

---

<div id="lightbox"> is inside the <body> element, thus when you scroll the lightbox you also scroll the body. The solution is to not extend the <body> element over 100%, to place the long content inside another div element and to add a scrollbar if needed to this div element with 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>

Now, scrolling over the lightbox (and the body as well) has no effect, because the body is no longer than 100% of the screen height.

---

All modal/lightbox javascript-based systems use an overflow when displaying the modal/lightbox, on html tag or body tag.

When lightbox is show, the js push a overflow hidden on html or body tag. When lightbox is hidden, some remove the hidden other push a overflow auto on html or body tag.

Developers who work on Mac, do not see the problem of the scrollbar.

Just replace the hidden by an unset not to see the content slipping under the modal of the removal of the scrollbar.

Lightbox open/show:

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

Lightbox close/hide:

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

---

If the page under the overlayer can be "fixed" at the top, when you open the overlay you can set

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

provide this class to the scrollable body, you should still see the right scrollbar but the content is not scrollable.

To maintain the position of the page do this in jquery

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

When you close the overlay just revert these properties with

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

I just proposed this way only because you wouldn't need to change any scroll event

---

You can do it with Javascript:

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

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

And then disable it when your lightbox is closed.

But if your lightbox contains a scroll bar, you won't be able to scroll while it's open. This is because window contains both body and #lightbox. So you have to use an architecture like the following one:

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

And then apply the onscroll event only on #global.

참고URL : https://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it