프로그래밍 방식으로 jQuery를 사용하여 페이지 스크롤을 비활성화하는 방법

jQuery를 사용하여 본문 스크롤을 비활성화하고 싶습니다.

내 생각은 :

1. 세트 body{ overflow: hidden;}
2. 현재를 캡처 scrollTop();/scrollLeft()
3. 본문 스크롤 이벤트에 바인딩하고 scrollTop / scrollLeft를 캡처 된 값으로 설정하십시오.

더 좋은 방법이 있습니까?

최신 정보:

내 예와 이유를 참조하십시오. http://jsbin.com/ikuma4/2/edit

나는 누군가가 왜 "그냥 사용하지 않는가? position: fixed 패널에서 않습니까?" 입니다.

다른 이유가 있으므로 제안하지 마십시오.

내가 찾은 유일한 방법은 설명 한 것과 비슷합니다.

1. 현재 스크롤 위치를 잡습니다 (가로축을 잊지 마십시오!).
2. overflow를 hidden으로 설정하십시오 (아마도 이전 overflow 값을 유지하려고 함).
3. scrollTo ()를 사용하여 문서를 저장된 스크롤 위치로 스크롤하십시오.

그런 다음 다시 스크롤 할 수있게되면 모든 실행을 취소하십시오.

편집 : 코드를 파는 데 어려움을 겪은 후 코드를 줄 수없는 이유는 없습니다 ...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])

스크롤 이 완전히 비활성화 됩니다 .

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

복원하려면

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

Firefox 및 Chrome에서 테스트했습니다.

이 시도

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

나는 tfe에 의해 솔루션에 약간의 조정을 제공합니다 . 특히, 스크롤 막대가로 설정되어있을 때 페이지 내용 (일명 page shift )이 이동하지 않도록 추가 제어 기능을 추가 했습니다.hidden .

두 자바 스크립트 기능 lockScroll()과는 unlockScroll()잠금 및 페이지 스크롤 잠금을 해제하기 위해 각각 정의 할 수 있습니다.

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

여기서 <body>초기 마진이 없다고 가정했습니다 .

위의 솔루션은 대부분의 실제 사례에서 작동하지만 예를 들어 헤더가 포함 된 페이지를 추가로 사용자 정의해야하므로 결정적인 것은 아닙니다 position:fixed. 이 특별한 경우를 예로 들어 봅시다. 가지고 있다고 가정

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

와

#header{position:fixed; padding:0; margin:0; width:100%}

그런 다음, 하나는 기능에 다음 추가해야합니다 lockScroll()및 unlockScroll():

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

마지막으로 여백이나 패딩에 대한 초기 값을 관리하십시오.

이 코드를 사용할 수 있습니다 :

$("body").css("overflow", "hidden");

스크롤을 끄려면 다음을 시도하십시오.

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

리셋하려면 :

$(window).off('scroll');

이것을 처리하기 위해 jQuery 플러그인을 작성했습니다 : $ .disablescroll .

마우스 휠, touchmove 및 키 누르기 이벤트 (예 :)에서 스크롤을 방지 Page Down합니다.

있다 여기 데모 .

용법:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");

이벤트를 스크롤하고 기본 동작을 방지하는 기능을 첨부 할 수 있습니다.

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

마우스 가운데 버튼을 포함하여 스크롤을 비활성화하는 하나의 라이너.

$(document).scroll(function () { $(document).scrollTop(0); });

편집 : 어쨌든 바닐라 JS에서 위와 동일하게 jQuery가 필요하지 않습니다 (즉, 프레임 워크가 아니라 JavaScript 만 의미 함).

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop-표준

this.body.scrollTop-IE 호환성

• 스크롤을 숨기려면 $("body").css("overflow", "hidden");
• 스크롤을 복원하려면 $("body").css("overflow", "initial");

몸 높이를 100 %로 설정하고 오버플로를 숨길 수 없습니까? http://jsbin.com/ikuma4/13/edit 참조

누군가이 코드를 게시했는데 복원 할 때 스크롤 위치를 유지하지 못하는 문제가 있습니다. 그 이유는 사람들이 HTML과 본문 또는 본문에만 적용하는 경향이 있지만 HTML에만 적용해야하기 때문입니다. 이 방법으로 복원하면 스크롤 위치가 유지됩니다.

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

복원하려면

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});

이것은 목적에 따라 작동하거나 작동하지 않을 수 있지만 스크롤하기 전에 jScrollPane 을 확장 하여 다른 기능을 시작 하도록 할 수 있습니다 . 나는 이것을 조금 테스트했지만, 당신이 뛰어 들어가서 스크롤을 완전히 막을 수 있음을 확인할 수 있습니다. 내가 한 것은 :

• 데모 zip을 다운로드하십시오 : http://github.com/vitch/jScrollPane/archives/master
• "이벤트"데모 (events.html)를 엽니 다.
• 축소되지 않은 스크립트 소스를 사용하도록 편집하십시오. <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
• jquery.jscrollpane.js 내에 "return;"을 삽입하십시오. 666 번째 줄 (의심 한 줄 번호!) 버전이 약간 다른 경우, 이것은 positionDragY(destY, animate)함수 의 첫 줄입니다

events.html을 실행하면 코딩 개입으로 인해 스크롤되지 않는 일반적으로 스크롤 상자가 표시됩니다.

이 방법으로 전체 브라우저의 스크롤 막대를 제어 할 수 있습니다 (fullpage_scroll.html 참조).

따라서 다음 단계는 다른 기능에 대한 호출을 추가하여 고정 마법을 수행 한 다음 스크롤을 계속할지 여부를 결정하는 것입니다. scrollTop 및 scrollLeft를 설정하기위한 API 호출도 있습니다.

도움이 더 필요한 경우, 어디에 도착했는지 게시하십시오!

이것이 도움이 되었기를 바랍니다.

나는 여기에 도움이 될만한 답변을했다. jQuery simplemodal disable scrolling

텍스트를 이동하지 않고 스크롤 막대를 끄는 방법을 보여줍니다. 단순 모드에 대한 부분은 무시해도됩니다.

키보드 탐색으로 스크롤을 비활성화하려는 경우 키 다운 이벤트를 재정의 할 수 있습니다.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

이 코드를 사용해보십시오 :

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

페이지의 내용이 스크롤되는 것을 방지하기 위해 스크롤 가능한 div로 창을 덮을 수 있습니다. 숨기고 표시하여 스크롤을 잠 그거나 잠금 해제 할 수 있습니다.

다음과 같이하십시오 :

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

를 통해 중심 레이아웃을 가진 사람들을 위해 margin:0 auto;, @tfe 의 제안 된 솔루션 position:fixed과 함께 솔루션 의 매시업이 있습니다.

스크롤 막대 표시 / 숨김으로 인해 페이지 스냅이 발생하는 경우이 솔루션을 사용하십시오.

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

…와 결합 된…

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

... 그리고 마지막으로, 대한 CSS .modal-noscroll...

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

나는이 더 적절한 수정이 밖으로 다른 솔루션들보다라고 감히 것입니다,하지만 난 그것을 테스트하지 않은 것을 철저하게 아직 ... : P

편집 : 터치 장치에서 이것이 얼마나 나빠질 수 있는지 실마리는 없습니다.

DOM을 사용하여 그렇게 할 수도 있습니다. 다음과 같이 호출하는 함수가 있다고 가정하십시오.

function disable_scroll() {
document.body.style.overflow="hidden";
}

그리고 그것이 전부입니다! 이것이 다른 모든 답변 외에도 도움이되기를 바랍니다!

이것이 내가 한 일입니다.

CoffeeScript :

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

자바 스크립트 :

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});

아무도 내 솔루션을 시도했는지 확실하지 않습니다. 이것은 전체 본문 / HTML에서 작동하지만 스크롤 이벤트를 발생시키는 모든 요소에 적용될 수 있습니다.

필요에 따라 scrollLock을 설정하고 설정 해제하면됩니다.

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

여기 예가 있습니다 JSFiddle 입니다

이것이 누군가를 돕기를 바랍니다.

가장 깨끗하고 깨끗한 해결책은 다음과 같습니다.

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

그리고 jQuery로 :

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

이러한 이벤트 리스너는 스크롤을 차단해야합니다. 스크롤을 다시 활성화하려면 제거하십시오.