모달 열 때 BODY 스크롤 방지

source

모달 열 때 BODY 스크롤 방지

bestscript 2022. 10. 23. 11:41

모달 열 때 BODY 스크롤 방지

마우스휠을 사용할 때 내 몸이 스크롤하지 않도록 하고 싶다(웹사이트 http://twitter.github.com/bootstrap)에서).

modal이 열리면 아래 javascript를 호출하려고 했지만 성공하지 못했습니다.

$(window).scroll(function() { return false; });

그리고.

$(window).live('scroll', function() { return false; });

당사 웹사이트에서 IE6에 대한 지원이 중단된 것에 유의하십시오. 단, IE7+는 호환성이 있어야 합니다.

의 '''modal는 자동으로 합니다.modal-open모달 대화 상자가 표시될 때 본문으로 이동하고 대화 상자가 숨겨질 때 제거합니다. CSS에 항목을 할 수 .

body.modal-open {
    overflow: hidden;
}

위의 코드가 Bootstrap CSS 코드베이스에 속한다고 주장할 수 있지만, 이것은 사이트에 추가하는 간단한 수정입니다.

2월 ★ 2★ 8★★★★
으로 Twitter v.0에서는 하지 않게 .Twitter Bootstrap v. 2.3.0은 되지 않습니다.modal-open격에맞맞 맞맞맞다다

회피책은 모달 표시가 임박했을 때 클래스를 본문에 추가하고 모달이 닫혔을 때 클래스를 삭제하는 것입니다.

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013년 3월 11일 갱신modal-open스크롤을 3으로 돌아갑니다.class는 class 3.0으로 돌아갑니다.

본문에 .modal-open을 재도입합니다(그래서 스크롤을 조작할 수 있습니다).

https://github.com/twitter/bootstrap/pull/6342 를 참조해 주세요.모달 섹션을 참조해 주세요.

인정된 답변은 모바일(최소한 Safari 7을 탑재한iOS 7)에서는 동작하지 않으며, CSS가 동작할 때 MOAR JavaScript를 사이트에서 실행하고 싶지 않습니다.

이 CSS를 사용하면 모달에서 배경 페이지가 스크롤되지 않습니다.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

. position:absolute는 이 문제를 해결하지만 모바일 상에서 스크롤하는 기능을 다시 도입합니다.

뷰포트(에 뷰포트를 추가하기 위한 플러그인)를 알고 있는 경우는, 의 css 토글을 추가할 수 있습니다.position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

또, 모달의 표시/숨김을 할 때, 밑 페이지가 좌우로 점프하는 것을 방지하기 위해서 추가했습니다.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

이 답은 X 포스트입니다.

단순히 본문의 오버플로우를 숨기면 본문이 스크롤되지 않습니다.모달 숨김 시 자동으로 되돌립니다.

코드는 다음과 같습니다.

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

@charlietfl의 답변을 넘어 스크롤 바를 고려해야 합니다.그렇지 않으면 문서가 리플로우 될 수 있습니다.

모달 열기:

body의 변화
★★bodyhidden

1단계에서 본문 너비를 명시적으로 설정합니다.

var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

모달 닫기:

★★bodyauto

★★body에서 넓이까지auto

var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

출처 : http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

본문 크기를 오버플로우가 있는 창 크기로 설정할 수 있습니다: 모달(모달)이 열려 있을 때 숨김

경고:다음 옵션은 Bootstrap v3.0.x와 관련이 없습니다.이러한 버전의 스크롤은 모달 자체에 한정되어 있기 때문입니다.휠 이벤트를 비활성화하면 일부 사용자가 뷰포트 높이보다 높은 모달에서 콘텐츠를 볼 수 없게 될 수 있습니다.

또 다른 옵션:휠 이벤트

스크롤 이벤트는 취소할 수 없습니다.그러나 마우스 휠 및 휠 이벤트를 취소할 수 있습니다.가장 큰 경고는 모든 레거시 브라우저가 이러한 브라우저들을 지원하는 것은 아니라는 것입니다. Mozilla는 최근에야 Gecko 17.0에서 후자의 지원을 추가했습니다.자세한 내용은 모르지만 IE6+와 Chrome은 지원합니다.

이를 활용하는 방법은 다음과 같습니다.

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

이것을 사용해 보세요.

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

(IE8 지원)

2017년 11월 현재 Chrome은 새로운 css 속성을 도입했습니다.

overscroll-behavior: contain;

그러면 이 문제가 해결됩니다.단, 쓰기에서는 크로스 브라우저 지원이 제한되어 있습니다.

자세한 내용과 브라우저 지원에 대해서는 아래 링크를 참조하십시오.

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

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

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

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});

CSS 변경만으로 Chrome에서 동작할 수 없었습니다.페이지가 위로 스크롤되는 것을 원하지 않았기 때문입니다.이것은 정상적으로 동작했습니다.

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

클래스 'is-modal-open'을 추가하거나 javascript로 바디태그 스타일을 수정해도 문제없이 동작합니다.그러나 본문이 오버플로가 되면 숨겨져 맨 위로 점프합니다(scrollTop은 0이 됩니다).이것은 나중에 사용상의 문제가 됩니다.

이 문제의 해결책으로 본문 태그 오버플로를 변경하는 대신 html 태그에서 숨김 변경

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

부트스트랩의 경우는, 이것을 시험할 수 있습니다(작업중).Firefox,Chrome ★★★★★★★★★★★★★★★★★」Microsoft Edge

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

이게 도움이 되길...

이 암호는 잘 모르겠지만 시도해 볼 만해요.

jQuery의 경우:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

아까도 말했지만 100% 확신할 수는 없지만 어쨌든 시도해 보세요.

이것이 Bootstrap과 함께 작동할지 100% 확신할 수는 없지만 시도해 볼 가치가 있습니다.Remodal.js는 github: http://vodkabears.github.io/remodal/에서 찾을 수 있으며 방법은 거의 비슷합니다.

이동을 하기 위해 를 에 합니다.bodyCSS를 사용하다

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

★★★★★★★★★★★★★★★★★★입니다position:static 및height:auto컨텐츠가 오른쪽으로 이동하는 것을 막기 위해 결합됩니다.overflow-y:hidden;는, 모달의 뒤로 페이지를 스크롤 할 수 없게 합니다.

필요한 경우 반응하십시오.

팝업되는 모달의 useEffect

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

css-only css-only이다.body{overflow:hidden}이 답변의 대부분이 사용하고 있는 솔루션입니다.일부 답변은 스크롤바가 사라지면서 발생하는 "점프"를 방지하는 수정 방법을 제공하지만 너무 우아한 답변은 없습니다.그래서 이 두 가지 함수를 작성했는데 꽤 잘 작동하는 것 같습니다.

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

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

사용 중인 jsFiddle을 확인하십시오.

많은 사람들이 본문에 "오버플로우: 숨김"을 제안하는데, 이것은 웹사이트가 맨 위로 스크롤되도록 하기 때문에(적어도 제 경우에는) 작동하지 않습니다.

이것은 jQuery를 사용하여 (휴대전화와 컴퓨터 모두에서) 나에게 적합한 솔루션입니다.

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

이것에 의해, 모달의 스크롤이 동작해, Web 사이트의 스크롤이 동시에 행해지지 않게 됩니다.

완벽하게 작동하려면 뷰포트 높이를 설정해야 했습니다.

body.modal-open {
  height: 100vh;
  overflow: hidden;
}

다음의 논리를 사용할 수 있습니다.테스트를 해봤더니 동작합니다(IE에서도 동작합니다).

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

이 바이올린을 기반으로 http://jsfiddle.net/dh834zgw/1/

다음 스니펫(jquery 사용)은 창 스크롤을 비활성화합니다.

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

그리고 css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

모달 삭제 시 html 태그의 noscroll 클래스를 삭제하는 것을 잊지 마십시오.

$('html').toggleClass('noscroll');

안타깝게도 위의 답변들 중 어느 것도 제 문제를 해결하지 못했습니다.

저 같은 경우에는 원래 웹페이지에 스크롤바가 있습니다.모달 버튼을 클릭할 때마다 스크롤바가 사라지지 않고 헤더가 오른쪽으로 조금 이동합니다.

나서 저는 이 말을 했습니다..modal-open{overflow:auto;}되었습니다..이치노모달 열면 스크롤바가 표시됩니다.그러나 또 " 뒤에 또 긴 함께 는이다.

운 좋게도, 내가 추가한 후에{padding-right: 0 !important;}, 모든 것이 완벽하게 해결되었습니다.헤더와 본문 배경 모두 움직이지 않고 모달은 스크롤바를 유지합니다.

이것이 아직 이 문제로 고민하고 있는 사람들에게 도움이 되기를 바랍니다.행운을 빕니다.

이 방법은 효과가 있었습니다.

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

대부분의 조각들이 여기 있지만, 모든 것을 종합할 수 있는 해답은 보이지 않는다.

문제는 세 가지다.

(1) 아래 페이지의 스크롤을 방지한다.

$('body').css('overflow', 'hidden')

(2) 스크롤 바를 제거한다.

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) 모달 해제 시 청소

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

모달 전체 화면이 아닌 경우 .modal 바인딩을 전체 화면 오버레이에 적용합니다.

부트스트랩 3용 솔루션:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

왜냐하면 나에겐 유일한overflow: hidden에서body.modal-open클래스는 원본 때문에 페이지가 왼쪽으로 이동하는 것을 막지 않았다.margin-right: 15px.

그냥 이렇게 했는데...

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

하지만 스크롤러가 사라졌을 때 모든 것을 20px로 옮겼기 때문에

$('body').css('margin-right', '20px');

그 직후에요.

저는 좋아요.

모달의 높이가 100%/폭인 경우 스크롤을 쉽게 활성화/비활성화할 수 있습니다.정말 잘 됐어요.

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

체크박스 해킹에 의해 생성된 사이드바가 있습니다.그러나 주요 아이디어는 문서 스크롤 상단을 저장하고 창을 스크롤하는 동안 변경하지 않는 것입니다.

나는 단지 본문이 '오버플로우: 숨김'이 되었을 때 페이지가 뛰는 것이 싫었다.

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

이 문제는 주로 iOS에서 발생하므로 iOS에서만 해결할 수 있는 코드를 제공합니다.

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

위의 답변들 중 어느 것도 나에게 완벽하게 먹히지 않았다.그래서 나는 잘 되는 다른 방법을 찾았다.

a를 추가해 주세요.scroll.(namespace)청취자 및 세트scrollTop의document최신 가치까지...

또, 촘촘한 스크립트에서 리스너도 삭제합니다.

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
  
  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

갱신하다

크롬에서는 잘 작동하지 않는 것 같습니다.고치기 위한 제안이 있습니까?

이것은 동작합니다.

body.modal-open {
   overflow: hidden !important;
}

언급URL : https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened

'source' 카테고리의 다른 글

일정한 값으로 데이터 프레임에 열 추가 (0)	2022.10.23
pip의 --no-cache-dir는 어떤 장점이 있습니까? (0)	2022.10.23
IBM PASE에 MariaDB용 ODBC 드라이버가 있습니까? (0)	2022.10.23
Laravel은 "루트가 정의되지 않았습니다"라고 말합니다. (0)	2022.10.23
숫자 리터럴의 ULL 접미사 (0)	2022.10.23

현재글모달 열 때 BODY 스크롤 방지

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

typeScript, oracle, spring, spring-boot, MySQL, REACTJS, MariaDB, Vuex, java, MongoDB, vuejs2, JavaScript, C, json, Wordpress, AngularJS, php, Azure, Python, AJAX,

Today :
Yesterday :

bestscript

모달 열 때 BODY 스크롤 방지

모달 열 때 BODY 스크롤 방지

모달 열기:

모달 닫기:

또 다른 옵션:휠 이벤트

JSFiddle

갱신하다

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2026/04 »
일	월	화	수	목	금	토
			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	29	30

모달 열 때 BODY 스크롤 방지

모달 열 때 BODY 스크롤 방지

모달 열기:

모달 닫기:

또 다른 옵션:휠 이벤트

JSFiddle

갱신하다

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바