투케이2K

65. (html/css/javascript/jquery) 모바일 스크롤 시 부드럽게 처리하기 - overflow scrolling 본문

FrontEnd

65. (html/css/javascript/jquery) 모바일 스크롤 시 부드럽게 처리하기 - overflow scrolling

투케이2K 2021. 7. 30. 07:53

[개발 환경 설정]

개발 툴 : Edit++

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


[소스 코드]

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* [html, body 영역 스타일 지정] */
		html, body {
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;

			/* [모바일 스크롤 시 부드럽게 처리] */
			overflow:scroll-y; 
			-webkit-overflow-scrolling:touch;					
		}
		/* [body 스크롤바 메인 스타일 지정] */
		body::-webkit-scrollbar {			
			width: 0px;					
			background-color: #c1c1c1;
		}
		/* [body 스크롤바 thumb 스타일 지정] */
		body::-webkit-scrollbar-thumb {					
			background-color: #444444;
		}
    <style>

[결과 출력]


 

반응형
Comments