스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

programing

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

coolbiz 2023. 1. 27. 21:59

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

scrollTo jQuery 플러그인을 사용하고 있는데 Javascript를 통해 윈도우 요소의 스크롤을 일시적으로 비활성화할 수 있는지 알고 싶습니다.스크롤을 무효로 하고 싶은 이유는 스크롤 To가 애니메이션을 하고 있을 때 스크롤을 하면 매우 보기 흉해지기 때문입니다.

할 수 요.$("body").css("overflow", "hidden");애니메이션이 정지하면 다시 auto로 되돌립니다만, 스크롤 바는 아직 표시되지만 비활성화되어 있으면 더 좋습니다.

scroll이벤트를 취소할 수 없습니다.단, 다음 상호 작용 이벤트를 취소하여 수행할 수 있습니다.
마우스&터치 스크롤과 스크롤 관련 버튼.

[작업 데모]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

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

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

업데이트: 패시브 리스너를 탑재한 고정 Chrome 데스크톱 및 최신 모바일 브라우저

본문에 클래스를 추가하는 것만으로 간단하게 실행할 수 있습니다.

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

IE, FF, Safari 및 Chrome에서 테스트된 스크롤을 다시 활성화하려면 클래스를 추가한 후 삭제하십시오.

$('body').addClass('stop-scrolling')

모바일 디바이스의 경우,touchmove 이벤트 표시:

$('body').bind('touchmove', function(e){e.preventDefault()})

스크롤을 다시 활성화하려면 바인드를 해제하십시오.iOS6 및 Android 2.3.3에서 테스트 완료

$('body').unbind('touchmove')

기본적인 방법은 다음과 같습니다.

window.onscroll = function () { window.scrollTo(0, 0); };

IE6에서는 좀 불안정해요.

다음 솔루션은 기본이지만 순수 JavaScript(jQuery 없음)입니다.

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

이 솔루션은 사용자가 다시 맨 위로 점프하는 것과 달리 스크롤이 비활성화되어 있는 동안 현재 스크롤 위치를 유지합니다.

Galambalaz의 답변을 기반으로 하지만 터치 디바이스를 지원하며 jquery 플러그인 래퍼로 단일 개체로 리팩터링됩니다.

데모를 해 주세요.

여기 기투브에.

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

오래된 글에 답해서 죄송하지만 해결책을 찾다가 이 질문을 하게 되었습니다.

해결 이 있습니다. 예를 의 높이를 100%로 설정하고 입니다. 예를 들어 컨테이너의 높이를 100%로 설정하고,overflow-y: scroll스타일링.

.div는 div, div는 div, div를 했습니다.overflow: hidden다음 중 하나:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

요소 스크롤 막대의 스타일은 다음과 같아야 합니다.

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

이것은 회색 스크롤 바를 보여줍니다. 이것이 미래의 방문객들에게 도움이 되기를 바랍니다.

var winX = null;
var winY = null;

window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});

function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
}

function enableWindowScroll() {
    winX = null;
    winY = null;
}

이 문제에 대한 해결책을 찾고 있었지만, (이 답변을 쓰는 시점에서는) 위의 어떤 해결책에도 만족하지 못했기 때문에, 이 해결책을 생각해 냈습니다.

CSS

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

및 에서는 Chrome 56을 .passive:falseaddEventListener를 걸다preventDefault그래서 모바일 스크롤을 멈추기 위해 이것을 사용합니다.

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

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

아니요, 다음 이유로 이벤트 처리를 사용하지 않습니다.

모든 이벤트가 신체에 도달하는 것이 보장되는 것은 아닙니다.
텍스트를 선택하고 아래로 이동하면 실제로 문서가 스크롤됩니다.
분리하는 단계에서 잘못되면 당신은 끝장입니다.

과 함께 붙여넣기 복사 할 것은 내부적으로는 전화를 걸어야 때문입니다.내부적으로는 콜 전에 텍스트 영역을 선택해야 하기 때문에 복사할 때마다 페이지가 스크롤됩니다.document.execCommand('copy').

나는 있어, 해.setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

스크롤바가 순간적으로 사라지면서 모멘텀 플래시가 발생하지만 허용 가능한 일입니다.

Galambalaz 게시물에 따르면 터치 디바이스 지원을 추가하여 터치할 수 있지만 위아래로 스크롤할 수 없습니다.

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

삭제한 스크롤의 목적에 따라 스크롤을 삭제할 요소를 수정할 수 있습니다(클릭 시 또는 일시적으로 스크롤을 비활성화하고 싶은 다른 트리거).

'템플 없음' 솔루션을 찾고 있었는데, 이것으로 해결되었습니다.

수업하다

.fixed{
    position: fixed;
}

그리고 Jquery와 함께

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

이것은 모든 브라우저에서 잘 작동하며 휴대용 기기(iPhone, 태블릿 등)에서도 쉽게 사용할 수 있는 간단한 솔루션이라는 것을 알게 되었습니다.요소가 일시적으로 고정되어 있기 때문에 스크롤은 없습니다. : )

참고! "contentContainer" 요소의 위치에 따라 왼쪽부터 조정해야 할 수 있습니다.고정 클래스가 활성화 되어 있을 때 css 왼쪽 값을 해당 요소에 추가하면 쉽게 실행할 수 있습니다.

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

secondary 페이지를 modal 대화상자로 표시하기 위해 show Modal Dialog를 사용하고 있습니다.

주 윈도우 스크롤 바를 숨기려면:

document.body.style.overflow = "hidden";

모달 대화 상자를 닫으면 주 윈도우 스크롤 막대가 표시됩니다.

document.body.style.overflow = "scroll";

대화 상자에서 기본 창의 요소에 액세스하려면:

parent.document.getElementById('dialog-close').click();

showModalDialog: (오리지널코드의 29행 뒤에 있습니다)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

또 다른 솔루션:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

이렇게 하면 항상 세로 스크롤 막대가 있지만, 대부분의 컨텐츠가 뷰포트보다 길기 때문에 저는 괜찮습니다.콘텐츠는 별도의 div가 중심이지만, 본문에 여백을 다시 설정하지 않으면 콘텐츠는 왼쪽에 머무릅니다.

팝업/모달 표시에 사용하는 두 가지 기능은 다음과 같습니다.

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

결과: 왼쪽 스크롤 막대로 인해 스크롤할 수 없는 배경과 컨텐츠의 위치가 변경되지 않습니다.현재의 FF, Chrome 및 IE 10에서 테스트 완료.

이게 내가 지금까지 얻은 가장 간단한 해결책이야.그리고 내가 다른 것들은 다 해봤는데 이게 제일 쉬워요.이 기능은 오른쪽에서 페이지를 밀어 시스템스크롤바를 위한 공간을 확보할 수 있도록 하는 Windows 디바이스와 브라우저 내의 스크롤바를 위한 공간을 필요로 하지 않는 IOS 디바이스에서 매우 효과적입니다.따라서 css로 본문이나 html의 오버플로우를 숨길 때 페이지가 깜박이지 않도록 오른쪽에 패딩을 추가할 필요가 없습니다.

생각해보면 해결책은 매우 간단합니다.이 아이디어는 팝업이 열린 시점에서 window.scrollTop()에 정확한 위치를 지정하는 것입니다.또, 윈도우의 사이즈가 변경되었을 때에(스크롤의 위치가 변경되었을 때에) 그 위치를 변경합니다.

자, 이제...

먼저 팝업이 열려 있음을 알려주고 stopWindowScroll이라고 하는 변수를 만듭니다.이렇게 하지 않으면 페이지에 정의되지 않은 변수의 오류가 표시되고 0 - not active로 설정됩니다.

$(document).ready(function(){
    stopWindowScroll = 0;
});

이제 open popup function wizze는 플러그인 또는 커스텀으로 사용하는 팝업을 트리거하는 코드 내의 모든 함수일 수 있습니다.이 경우 클릭 시 간단한 문서 기능을 가진 간단한 커스텀 팝업이 됩니다.

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

다음으로 닫기 팝업 기능을 만듭니다.다시 한 번 말씀드리지만 플러그인으로 이미 작성했거나 사용하고 있는 모든 기능을 사용할 수 있습니다.중요한 것은 stopWindowScroll 변수를 1 또는 0으로 설정하여 언제 열렸는지, 닫혔는지 알 수 있도록 하기 위해 이 두 가지 함수가 필요합니다.

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

그런 다음 window.scroll 함수를 만들어 위에서 언급한 stopWindowScroll이 1 - active로 설정된 후 스크롤을 방지할 수 있도록 합니다.

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

바로 그거야.이 작업을 수행하기 위해 CSS가 필요하지 않습니다.단, 사용자 자신의 페이지 스타일을 제외합니다.이것은 나에게 마법처럼 작용했고 당신과 다른 사람들에게 도움이 되길 바랍니다.

다음으로 JSFiddle에 관한 작업 예를 나타냅니다.

JS 바이올린 예시

이게 도움이 됐는지 알려주세요.안부 전해요.

은 '을 제거할 때 '쿵합니다.overflow: hidden이 솔루션에서 제안된 것이 적용됩니다.편집이 거부되었으므로 다음과 같습니다.

다음 경우에 발생하는 "bump"를 제거하려면overflow: hidden적용되면 스크롤바의 폭을 계산하여 여백으로 대체할 수 있습니다. 다음과 body★★★★

const bodyScrollControls = {
  scrollBarWidth: window.innerWidth - document.body.clientWidth,

  disable() {
    document.body.style.marginRight = `${this.scrollBarWidth}px`;
    document.body.style.overflowY = 'hidden';
  },
  enable() {
    document.body.style.marginRight = null;
    document.body.style.overflowY = null;
  },
};

에 '있다'가 있는 margin-right기존 것을 가져와 스크롤바의 폭을 추가하는 것은 문제가 되지 않습니다.

다음과 같이 할 수 있습니다.

'과 '중요하지 않은' 가 절약됩니다.Position: fixed움직이지 않기 때문에 디자인 자체를 진행하지 않습니다.

CSS(CSS를 사용하면 생활과 기억의 용이화)

html[DisableScroll] {
    overflow-y: scroll;
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}

var enableScroll = function () {
   document.documentElement
     .removeAttribute('DisableScroll');
}

예

//When you want to enable escroll just call this function;

var enableScroll = function () {
   document.documentElement
   .removeAttribute('DisableScroll');
}
 
 setTimeout(() => {
    enableScroll();
}, 2000);

*{
  margin: 0px;
  padding: 0px
}
body{
  height: 4000px;
  background: #141417
}

html[DisableScroll] {
    overflow-y: scroll
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}
body>p{
color: #FBFBFD
}

div{
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  width: 270px;
  background: #FBFBFD;
  color: #141417;
  text-align: center
}

<!DOCTYPE html>
 <html lang="en" DisableScroll>
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body> 
    <div>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    </div>
     <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
 </body>
 </html>

이건 어때?(jQuery를 사용하는 경우)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

수락된 답변과 같이 이벤트를 취소하는 것은 끔찍한 방법이라고 생각합니다./

★★★★★★★★★★★★★★를 사용했습니다.position: fixed; top: -scrollTop();discloss.d.

데모: https://jsfiddle.net/w9w9hthy/5/

jQuery 팝업 프로젝트:https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

이 코드는 폭, 높이, 스크롤바 및 페이지 점프의 문제를 고려합니다.

위의 코드로 해결할 수 있는 문제:

width, 고정된 위치를 설정할 때 html 요소 너비는 100%보다 작을 수 있습니다.
높이, 위와 같음
스크롤바, 고정된 위치를 설정하면 수평 페이지 점프가 발생하기 전에 스크롤바가 있어도 페이지 내용에 더 이상 스크롤바가 없습니다.
페이지 점프, 위치를 고정으로 설정하면 페이지 스크롤 탑이 더 이상 유효하지 않게 되어 페이지 점프가 수직이 됩니다.

위 페이지의 freeze/freeze 코드가 개선되면 프로젝트에 추가할 수 있도록 알려주십시오.

가장 간단한 방법은 다음과 같습니다.

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

원래대로 되돌리려면:

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

구현은 간단하지만 단점은 다음과 같습니다.

중앙 정렬(수평)인 경우 페이지가 왼쪽으로 약간 이동합니다.

이는 스크롤 막대가 제거되고 뷰포트가 약간 넓어지기 때문입니다.

다음은 스크롤을 정지하기 위한 솔루션입니다(jQuery 없음).사이드 메뉴가 나타나면 스크롤을 비활성화하기 위해 사용합니다.

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

스크롤바의 소실을 보완하기 위해 패딩권 17px를 넣었습니다.그러나 이 또한 대부분 모바일 브라우저에 문제가 있다.이에 따라 막대폭을 구하면 해결된다.

이 펜에 다 같이.

점프를 방지하기 위해 이렇게 사용했어요.

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

그리고 내 css에서는

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

샤이엔 포브스의 답변과 fcalderan을 통해 찾은 답변: 스크롤을 숨기지 않고 비활성화 시키면? 그리고 스크롤바가 사라지는 한로돔의 문제를 해결할 수 있다.

CSS:

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

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

이 코드를 사용하면 페이지 맨 위로 이동할 수 있지만 fcalderan의 코드에는 해결 방법이 있는 것 같습니다.

오래된 질문인 것은 알지만, 저는 매우 비슷한 것을 해야 했습니다. 그리고 답을 찾고 다른 접근법을 시도한 후에, 결국 매우 쉬운 해결책을 사용하게 되었습니다.

문제는 매우 비슷하고 거의 동일하며 유일한 차이점은 스크롤 바를 실제로 표시할 필요가 없다는 것입니다.그냥 스크롤 바를 사용하는지 확인하기만 하면 됩니다.그래서 오버레이가 표시되는 동안 페이지 폭은 바뀌지 않습니다.

오버레이를 화면 안으로 슬라이드할 때 다음을 수행합니다.

$('body').addClass('stop-scrolling').css('margin-right', 8);

화면에서 오버레이를 슬라이드하면 다음과 같이 됩니다.

$('body').removeClass('stop-scrolling').css('margin-right', 0);

중요: 오버레이가 배치되어 있기 때문에 완벽하게 작동합니다.absolute,right: 0px언제visible.

저도 같은 문제가 있습니다.아래는 대처법입니다.

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

이게 도움이 되길 바라.

터치 디바이스에서도 같은 문제가 발생하고 있습니다.요소에 "touch-action: none"을 추가하면 문제가 해결되었습니다.

자세한 정보는.이것 좀 봐:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

이 코드는 Chrome 56 이상에서 작동합니다(원래 답변은 Chrome에서 더 이상 작동하지 않습니다).

사용하다DomUtils.enableScroll()스크롤을 유효하게 합니다.

사용하다DomUtils.disableScroll()스크롤을 비활성화합니다.

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

여기서 간단한 방법을 사용합니다.

.no-scroll{
  overflow: hidden;
}

let toggle_scrolling_state = () => {
   element.classList.toggle("no-scroll");
}

이벤트 스크롤을 중지하고 싶을 때 함수를 호출하거나...

전역 변수에 스크롤 길이를 저장하고 필요할 때 복원하십시오!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

다른 사이트에서 이 답을 찾았습니다.

스크롤 사용 안 함:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

팝업 화면을 닫은 후 릴리스 스크롤:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

언급URL : https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

저작자표시

'programing' 카테고리의 다른 글

mysql에 utf-8 mb4 문자(ios5의 emoji)를 삽입하려면 어떻게 해야 하나요? (0)	2023.01.27
C++ 퍼포먼스와Java/C# (0)	2023.01.27
javascript/jQuery에 php의 isset 같은 것이 있습니까? (0)	2023.01.27
단일 문자 읽기 전용으로 getchar()를 사용하여 Enter 키를 누르지 않도록 하려면 어떻게 해야 합니까? (0)	2023.01.27
mysql_real_escape_string()을 우회하는 SQL 주입 (0)	2023.01.27

현재글스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

spring3, vuex, C#, JavaScript, java, C, C++, vuejs2, jQuery, Spring,

Today :
Yesterday :

coolbiz

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

[작업 데모]

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

[작업 데모]

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바