숨기지 않고 스크롤을 비활성화 하시겠습니까? / body 스크롤 막대를 비활성화하려고합니다. 여기서 주요

라이트 박스를 사용하는 동안 부모의 html / body 스크롤 막대를 비활성화하려고합니다. 여기서 주요 단어는 disable 입니다. 나는 그것을 숨기고 싶지 않습니다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');

답변

선택한 솔루션에 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>

스 니펫 확장

내 라이트 박스 구현을 위해 정확히 이것을했습니다. 지금까지 잘 작동하는 것 같습니다.