83. (html/css/javascript/jquery) 모바일 웹 브라우저 당김 새로고침 막기 - overscroll-behavior contain 사용

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

---

[소스코드]

​

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body{
            width : 100%;
            height : 100%;
            margin : 0;
            padding : 0;
            border : none;  

            /* 배경 색상 지정 */
            background-color: #bbbbbb;
            
            /* 스크롤바 표시 지정 */
            overflow : hidden;

            /* 모바일 웹 브라우저 당겨서 새로고침 막기 */
            overscroll-behavior: contain;
        }



        /* body 스크롤바 메인 스타일 지정 */
        body::-webkit-scrollbar {
            /* 스크롤바 너비 지정 */
            width: 10px;
            
            /* 스크롤바 배경 색상 지정 */
            background-color: #c1c1c1;
        }
        /* body 스크롤바 thumb 스타일 지정 */
        body::-webkit-scrollbar-thumb {                 
            /* 스크롤바 thumb 색상 지정 */
            background-color: #444444;
        }

    </style>

---

[요약 설명]

​

<!--

[overscroll-behavior : contain]

1. 웹 브라우저를 모바일로 접속했을 때 화면 스크롤 당김 시 브라우저가 새로고침 되는 현상을 막아줍니다

2. 크롬 , 사파리 등 모바일 웹브라우저에서 모두 사용할 수 있는 방법입니다

-->

---