Westagram 스크롤 기능은 살리고 스크롤바는 없애기
스크롤 기능은 존재하되, 스크롤바가 보이지 않는 css 효과에 대해 알아봅시다!
💡먼저, 스크롤 기능을 추가하려면?
안녕하세요.
어쩌다 이곳에 오셨나요?
스크롤바 기능을 구현하려고 하시나요?
그런데 스크롤바는 없애고 싶은가요?
얼른 알려드리겠습니다.
조금만 밑으로 내려주세요.
다왔습니다.
이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.
😎
안녕하세요.
어쩌다 이곳에 오셨나요?
스크롤바 기능을 구현하려고 하시나요?
그런데 스크롤바는 없애고 싶은가요?
얼른 알려드리겠습니다.
조금만 밑으로 내려주세요.
다왔습니다.
이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.
😎
🙋♀️ 전체 스크롤 바를 없애고 싶어요!
body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }🙋♂️ 특정 부분 스크롤바를 없애고 싶어요!
.box{ -ms-overflow-style: none; } .box::-webkit-scrollbar{ display:none; }* 참고 사항
1. overflow: visible;
기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임.
2. overflow: hidden;
사이즈를 넘 칠경 우 글이 잘림.
3. overflow: scroll;
사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가.
4. overflow: auto;
양에 따라 스크롤이 자동으로 추가될지 결정.
5. overflow-x, overflow-y
가로, 세로 overflow를 각각 제어하고자 한다면 overflow-x와 overflow-y를 사용.
출처: //wooaoe.tistory.com/49 [개발개발 울었다]
티스토리 뷰
YG - 96년생 , 강아지 있음, 개발자 희망 2021. 5. 26. 09:00
이를 숨기는 방법
.screen-box{ -ms-overflow-style:none /* IE and Edge */ scrollbar-width:none /* Firefox */ } .screen-box::-webkit-scrollbar { display:none /* Chrome , Safari , Opera */ }브라우저 환경에 따라 사용하면 되겠다
::-webkit-scrollbar 유사 요소 선택기를 사용하여 CSS에서 요소의 스크롤바 스타일을 지정할 수 있습니다. 그러나 이 선택기는 Chrome, Opera, Safari, Edge 등을 포함한 Webkit 기반 브라우저에서만 사용할 수 있습니다. ::-webkit-scrollbar 의사 요소를 사용하여 웹 페이지의 전체 스크롤 막대를 선택하고 설정할 수 있습니다. display 속성을 none으로 변경합니다. 긴 웹페이지를 스크롤할 수는 있지만 스크롤바가 숨겨집니다.
예를 들어, PHP 파일을 만들고 파일에 기본 HTML 구조를 작성합니다. body 섹션 내에서 PHP 태그 를 열고 $text 변수에 ::-webkit-scrollbar { display: none; } 0 텍스트를 작성합니다. 변수를 100번 반복하고 텍스트를 표시합니다. CSS에서 ::-webkit-scrollbar 의사 요소를 사용하여 스크롤 막대를 선택합니다. 그런 다음 display 속성을 none으로 설정합니다.
위의 예에서는 PHP를 사용하여 텍스트를 100번 반복하여 웹 페이지를 스크롤하는 데 웹 페이지가 길어지도록 했습니다. PHP 코드는 ::-webkit-scrollbar { display: none; } 0 텍스트가 새 줄에 100번 인쇄되도록 합니다. display 속성을 none으로 설정하면 스크롤바가 숨겨지지만 여전히 페이지를 스크롤할 수 있습니다. 따라서 숨겨진 스크롤 막대 기능을 얻을 수 있습니다.
예제 코드:
"; } ?>
::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { display: none; } 5 속성을 사용하고 none으로 설정하여 CSS에서 스크롤바를 숨길 수 있습니다. 웹 페이지에서 스크롤바를 숨깁니다. 다른 옵션인 ::-webkit-scrollbar { display: none; } 7는 기본 스크롤바를 설정하고 ::-webkit-scrollbar { display: none; } 8 옵션은 브라우저에 따라 스크롤바를 더 얇게 보이게 합니다. 그러나 속성은 Firefox 브라우저에서만 작동합니다. 스크롤 기능이 콘텐츠를 클리핑하도록 유지하기 위해 ::-webkit-scrollbar { display: none; } 9 속성을 사용합니다. 블록 수준 요소가 상단과 버튼 가장자리에서 넘칠 때 작동합니다. 스크롤바 비활성화를 보여주기 위해 첫 번째 방법과 동일한 PHP 스크립트를 사용할 수 있습니다.
예를 들어
"; } ?>
0 클래스로"; } ?>
1를 생성합니다."; } ?>
1 내부에서 첫 번째 방법과 같이 텍스트를 반복합니다. CSS에서 컨테이너에 약간의 너비와 높이와 함께 배경색을 지정합니다. ::-webkit-scrollbar { display: none; } 5 속성을 none으로 설정하고 ::-webkit-scrollbar { display: none; } 9 속성을"; } ?>
6로 설정합니다.아래 예에서 ::-webkit-scrollbar { display: none; } 5를 none으로 설정하면 스크롤바가 숨겨지고 ::-webkit-scrollbar { display: none; } 9가
"; } ?>
6로 설정되면 스크롤 기능이 계속 활성화됩니다. 이런 식으로 스크롤바를 숨기고 있는 긴 페이지를 스크롤할 수 있습니다.728x90
300x250
::-webkit-scrollbar { display: none; }
/* Chrome, Safari, Opera 스크롤바 숨기기 */ .example::-webkit-scrollbar { display: none; } /* IE, Edge 스크롤바 숨기기 */ .example { -ms-overflow-style: none; }
overflow-y: hidden; /* 세로 스크롤바 숨기기*/ overflow-x: hidden; /* 가로 스크롤바 숨기기 */
출처 : //www.codegrepper.com/code-examples/css/how+to+remove+scrollbar+in+css
728x90
반응형
공유하기
게시글 관리
구독하기mooyou저작자표시 비영리 변경금지