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

163

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

내 생각은 :

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

더 좋은 방법이 있습니까?

최신 정보:

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

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

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

jquery  css  scroll 
— 우박
소스
7
"더 나은 방법이 있습니까?" -브라우저가 정상적으로 작동하도록하는 것 외에는
— Fenton
22
"음악적으로"?
— Mike Weller
6
아마도 프로그래밍 방식을 의미합니까? '프로그래밍 방식'에 대한 파이어 폭스 철자 수정 제안이기 때문에
— Michael Shimmins
4
이 글은 \ b \
— Cipi
3
@Sohnee 스크롤 비활성화! == 나쁜
— Mansiemans

답변:

136

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

  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])
— tfe
소스
2
jsbin.com/ikuma4/2/edit 를 참조하여 귀하의 의견 이 더 좋은 이유를 설명 해주십시오 . 나는 뭔가를 놓치고
— 있습니까 (
3
IE7에서는 접근 방식이 작동하지 않습니다. 나는 그것을 먼저 시도했다. 문제는 스크롤 이벤트에 빠르게 반응하지 않는다는 것입니다. 문서가 스크롤되도록 한 다음 JS가 원하는 위치로 스크롤 위치를 재설정하면 다시 스냅합니다.
— tfe
1
또한 body가 이외의 오버플로 auto가있는 경우 덮어 씁니다. 기존 설정을 유지해야했기 때문에 오버 헤드도 추가되었습니다.
— tfe
사람이 왜 단순히 스타일링 알고 있나요 html과 body함께 overflow: hidden불충분? 우리는 여전히 이벤트 핸들러가 필요합니다.
— kpozin
4
이것은 환상적인 답변입니다. 터치 장치에서 작동하게하려면 이 답변을 확인하십시오 .
— Patrick
235

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

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

복원하려면

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

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

— 기타 리크
소스
18
예상대로 작동합니다. 감사! 이것은 받아 들여진 대답이어야합니다!
— Dave Chen
6
크롬의 가운데 마우스 버튼으로 여전히 스크롤합니다.
— Lothar
16
현재 스크롤 위치가 사라집니다. OP는 스크롤 위치 캡처에 대해 명시 적으로 언급 했으므로 필요하다고 가정합니다. 어쨌든, 나는 그것을 요구한다. 그래서 이것은 나에게 제한적으로 사용된다
— zerm
7
PS height: 100%효과를 생략하면 최신 Chrome에서 점프하지 않고 현재 위치에서 스크롤을 효과적으로 잠급니다.
— zerm
2
이것은 정답이 아닙니다. 스크롤 위치가 캡처되지 않습니다
— taylorcressy
43

이 시도

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
— 큐비 우
소스
내가 찾던 것 ... 거의. 어쨌든 화살표 키 동안 비활성화 하시겠습니까?
— Cody
2
@Cody-CSS 오버플로와 결합 : hidden
— Darius.V
2
@cubbiu 어떻게 되돌릴까요?
— Meer
3
다음을 사용할 수 있습니다$('#element').off('scroll touchmove mousewheel');
— arnuschky
1
훌륭한 솔루션. body스크롤을 비활성화하고 다른 하위 요소 내에서 스크롤을 허용하는 방법은 overflow: scroll무엇입니까?
— Fizzix
27

나는 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);
}

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

— 장 발장
소스
4
자바 스크립트에 오류가 있습니다 $ body.css ({ 'margin-right': 0, 'margin-bottom', 0}); $ body.css 여야합니다 ({ 'margin-right': 0, 'margin-bottom': 0});
— Johansrk
실제로, 그냥 사용 marginRight하고 marginLeft:)
— Martijn
25

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

$("body").css("overflow", "hidden");
— Mr.Soroush
소스
8
마우스 가운데 버튼을 사용하여 스크롤 할 수 있습니다.
— Roger Far
2
아니, 이것도 괜찮고 스크롤도 없다!
— mr.soroush
여분의 CSS를 사용하면 스크롤을 완전히 비활성화 할 수 있습니다. 자세한 내용은 내 대답을 참조하십시오.
— gitaarik
21

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

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

리셋하려면 :

$(window).off('scroll');
— 패트릭 다바 더
소스
이것은 내가 필요한 것에 대한 환상적인 해결책이었습니다.
— Terry Carter
@EveryScreamer 아니오, 화면이 미친 것처럼 흔들립니다. 해결 방법을 찾으려고합니다.
— Telarian
5

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

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

있다 여기 데모 .

용법:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
— 조쉬 해리슨
소스
마우스 휠 / 스크롤 이벤트를 수신하면 disablescroll () 플러그인을 사용하여 스크롤을 일시적으로 비활성화하려고 시도했지만 작동하지 않습니다. 그 효과를 얻는 방법을 아는 기회가 있습니까?
— yellow-saint
@ JB 아마 도움이 될 수 있지만 의견이 가장 좋은 곳은 아닙니다. 이 스택 오버플로 채팅에 참여하면 내가 할 수있는 일을 확인할 수 있습니다. chat.stackoverflow.com/rooms/55043/disablescroll-usage
— Josh Harrison
죄송합니다.이 플러그인은 jsfiddle에서도 작동하지 않습니다.
— markj
어떤 브라우저 / 플랫폼이 작동하지 않는지 알려주십시오.
— Josh Harrison
5

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

var $window = $(window);

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

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

https://jsfiddle.net/22cLw9em/

— Dzimi
소스
1
이것이 정답입니다. 왜 그렇게 설정되지 않은지 모릅니다
— Guilherme Ferreira
효과가있다. 그냥 리셋 코드가 일치 게시 필요가 패트릭의 대답을
— Hastig Zusammenstellen에게
4

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

$(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 호환성

— 파웰
소스
3

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

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

복원하려면

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});
— 메스 칼리나
소스
'overflow': 'auto',사용 하지 않음'overflow': 'initial',
— evtuhovdo
2

이것은 목적에 따라 작동하거나 작동하지 않을 수 있지만 스크롤하기 전에 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 호출도 있습니다.

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

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

— 제레미 워네
소스
1

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

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
— 숀
소스
1

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

    $(function() { 
        // ...

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

        // ...
    });
— 조피
소스
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();
}
— Appex
소스
7
"u"및 "smth"와 같은 약어를 사용하지 마십시오. 가독성을 위해 철자를 정확하게 입력하십시오.
— Tin Man
0

를 통해 중심 레이아웃을 가진 사람들을 위해 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

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

— Matthemattics
소스
0

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

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

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

— 브렌던
소스
0

이것이 내가 한 일입니다.

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");
});
— 마르 츠
소스
0

아무도 내 솔루션을 시도했는지 확실하지 않습니다. 이것은 전체 본문 / 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 입니다

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

— 화석 MFC
소스
이것은 하나의 예외를 제외하고는 정상적으로 작동합니다. 스크롤이 잠겨있을 때 스크롤하면 실제로 스크롤을 잠그기 전에 약간 꼬입니다.
— Thomas Teilmann
0

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

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

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

— 티지 아노
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.