개발자의 끄적끄적

[javascript/jquery] body overflow:hidden 이 모바일에서 안 먹을때 javascript로 해결방법 [펌] 본문

개발/javascript & jquery

[javascript/jquery] body overflow:hidden 이 모바일에서 안 먹을때 javascript로 해결방법 [펌]

효벨 2020. 9. 26. 03:00
728x90
반응형

[javascript/jquery] body overflow:hidden 이 모바일에서 안 먹을때 javascript로 해결방법 [펌]

 

상황: 모바일에서 사이드 네비게이션이 열린 상태에서 스크롤시 body는 스크롤 되지 않게 하고싶다

Solution A: CSS

1

2

3

4

5

6

html,

body {

    overflow: hidden;

    position: relative;

    height: 100%;

}

PC에선 문제 없이 작동한다. 하지만 iOS 사파리랑 크롬에서는 무용지물.

Solution B: CSS – fix

1

2

3

4

5

body {

    position: fixed;

    width: 100%;

    height: 100%;

}

PC, 모바일 모두 되긴 하는데 Side nav를 닫은 후에는 position이 꼬임 -> DOM 클릭해도 이벤트가 활성화 안된다.

Solution C: jQuery

1

2

3

4

<body>

<div id="side-nav">사이드 네비게이션</div>

<div class="contents">여기에 body의 내용 넣는다</div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$(function(){

    $('#side-nav').on('show.bs.offcanvas', function (e) {

      $('#sidenav-overlay').addClass('active');

 

      /* Disable scroll */

      $('.contents').on('scroll touchmove mousewheel', function(e){

        e.preventDefault();

        e.stopPropagation();

        return false;

      });

    });

    $('#sidenav-overlay').click(function() {

      $('#side-nav').offcanvas('hide');

      $('#sidenav-overlay').removeClass('active');

 

      /* Enable scroll */

      $('.contents').off('scroll touchmove mousewheel');

    });

  });

jQuery on handler로 스크롤을 막는다.
HTML에서 사이드 네비게이션과 Contents 영역을 분간해두면
사이드 네비게이션 자체에서는 스크롤 가능하게 할 수 있다.

Refer

http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery

 

 

출처 : milooy.wordpress.com/2017/05/09/body-overflowhidden-not-working/

 

 

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[VueJS] Apache Tomcat서버에 배포하기 [펌]  (0) 2020.10.01
[javascript/jQuery] Roulette Winning Wheel 룰렛 소스코드 모음 [펌]  (0) 2020.09.29
[javascript/jquery] 스크롤바 감추기 예제  (0) 2020.09.26
[vue.js] local server IP로 접근하기 [펌]  (0) 2020.09.16
[javascript] 두 좌표간 거리계산 함수  (0) 2020.09.11
'개발/javascript & jquery' Related Articles more
Comments