HTML 페이지에서 스크롤 막대 숨기기
스크롤 막대를 숨기기 위해 CSS를 사용할 수 있습니까?어떻게 하시겠습니까?
WebKit는 표준 CSS 규칙으로 숨길 수 있는 스크롤바 유사 요소를 지원합니다.
#element::-webkit-scrollbar {
display: none;
}
모든 스크롤 막대를 숨기려면
::-webkit-scrollbar {
display: none;
}
복원에 대해서는 잘 모르겠습니다. 이것은 효과가 있었지만 올바른 방법이 있을 수 있습니다.
::-webkit-scrollbar {
display: block;
}
여러분은 물론언사수있다니습용할지든제를 사용할 수 .width: 0 러면쉽복수있다니습할구그게▁restored다니▁with로 쉽게 복원할 수 .width: auto하지만 저는 학대하는 것을 좋아하지 않습니다width가시성 조정을 위해.
이제 Firefox 64는 실험용 스크롤 막대 너비 속성을 기본적으로 지원합니다(63은 구성 플래그를 설정해야 함).Firefox 64에서 스크롤 막대를 숨기는 방법
#element {
scrollbar-width: none;
}
또는 를 을 합니다.scrollbar-width다음 스니펫을 사용해 보십시오.
.content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not directly involved in
hiding the scrollbar. */
border: 1px dashed gray;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;
}
.content {
/* This is the magic bit for Firefox */
scrollbar-width: none;
}
.content::-webkit-scrollbar {
/* This is the magic bit for WebKit */
display: none;
}<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.
Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>(이것은 가로 막대도 숨기기 때문에 질문에 대한 정답이 아닙니다. 하지만 구글이 저를 여기에 가리킬 때 제가 찾고 있던 것이 바로 그것이기 때문에 어쨌든 게시하기로 했습니다.)
네, 일종의...
"브라우저의 스크롤 막대를 단순히 숨기거나 위장하는 것이 아니라 어떤 방식으로든 제거할 수 있습니까?"라는 질문을 하면 모든 사람이 "불가능합니다."라고 대답할 것입니다. 호환성과 상호 호환성이 있는 방법으로 모든 브라우저에서 스크롤 막대를 제거할 수는 없기 때문입니다. 그러면 사용성에 대한 전체적인 논쟁이 있습니다.
그러나 웹 페이지가 오버플로되지 않도록 허용하지 않으면 브라우저에서 스크롤 막대를 생성하고 표시할 필요가 없습니다.
이는 브라우저가 일반적으로 수행하는 것과 동일한 동작을 사전에 대체하고 브라우저에 감사하지만 친구에게 감사하지 않음을 알려야 한다는 것을 의미합니다.스크롤 막대를 제거하려고 시도하는 것보다 스크롤을 피하고(완벽하게 실현 가능한) 요소 내에서 스크롤하여 제어력을 높일 수 있습니다.
오버플로가 숨겨진 디브를 만듭니다.사용자가 스크롤을 시도하지만 오버플로로 스크롤할 수 있는 브라우저 기능을 사용하지 않도록 설정했기 때문에 스크롤할 수 없는 경우 탐지: 숨김.이 경우 JavaScript를 사용하여 콘텐츠를 위로 이동합니다.따라서 브라우저의 기본 스크롤 없이 자체 스크롤을 만들거나 iScroll과 같은 플러그인을 사용할 수 있습니다.
---
철저한 관리를 위해 모든 공급업체별 스크롤 막대 조작 방법:
Internet Explorer 5.5+
*이러한 속성은 CSS 사양의 일부가 아니며 승인되거나 벤더 접두사가 붙지 않았지만 Internet Explorer 및 Konqueror에서 작동합니다.각 응용프로그램의 사용자 스타일 시트에서 로컬로 설정할 수도 있습니다.Internet Explorer의 "내게 필요한 옵션" 탭, Konquer 또는 "스타일시트" 탭 아래에 있습니다.
body, html { /* These are defaults and can be replaced by hexadecimal color values */
scrollbar-base-color: aqua;
scrollbar-face-color: ThreeDFace;
scrollbar-highlight-color: ThreeDHighlight;
scrollbar-3dlight-color: ThreeDLightShadow;
scrollbar-shadow-color: ThreeDDarkShadow;
scrollbar-darkshadow-color: ThreeDDarkShadow;
scrollbar-track-color: Scrollbar;
scrollbar-arrow-color: ButtonText;
}
Internet Explorer 8에서 이러한 속성은 Microsoft에 의해 접두사로 지정되었지만 W3C에 의해 승인되지 않았습니다.
-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color
Internet Explorer(인터넷 익스플로러)에 대한 추가 정보
가 인터익러것만드는가로를 만듭니다.scroll스크롤 막대의 비활성화 또는 활성화 여부를 설정하는 사용 가능. 스크롤 막대의 위치 값을 가져오는 데도 사용할 수 있습니다.
Internet Explorer 6을 사용하는 !DOCTYPE표준 호환 모드를 지정하는 선언입니다. 이 특성은 HTML 요소에 적용됩니다. Explorer와 표준 경우 이 은 "Internet Explorer"에 됩니다.BODY요소, 요소가HTML원소의
.NET을 사용하여 작업할 때 ScrollBar 클래스는System.Windows.Controls.Primitives프레젠테이션 프레임워크에서 스크롤바 렌더링을 담당합니다.
http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
웹킷
스크롤 막대 사용자 지정과 관련된 WebKit 확장은 다음과 같습니다.
::-webkit-scrollbar {} /* 1 */
::-webkit-scrollbar-button {} /* 2 */
::-webkit-scrollbar-track {} /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {} /* 5 */
::-webkit-scrollbar-corner {} /* 6 */
::-webkit-resizer {} /* 7 */
이들은 각각 추가적인 유사 선택기와 결합될 수 있습니다.
:horizontal수평 유사 클래스는 수평 방향이 있는 모든 스크롤 막대 조각에 적용됩니다.:vertical수직 유사 클래스는 수직 방향이 있는 모든 스크롤 막대 조각에 적용됩니다.:decrement감소 유사 클래스는 버튼 및 트랙 조각에 적용됩니다.버튼 또는 트랙 조각이 사용될 때 보기의 위치를 감소시킬지 여부를 나타냅니다(예: 수직 스크롤 막대 위, 수평 스크롤 막대 왼쪽).:increment증분 유사 클래스는 버튼 및 트랙 조각에 적용됩니다.버튼이나 트랙 조각이 사용될 때 뷰의 위치를 증가시킬지 여부를 나타냅니다(예: 수직 스크롤 막대 아래, 수평 스크롤 막대 오른쪽).:start시작 유사 클래스는 버튼 및 트랙 조각에 적용됩니다.개체가 엄지손가락 앞에 놓이는지 여부를 나타냅니다.:end종료 유사 클래스는 버튼 및 트랙 조각에 적용됩니다.개체가 엄지손가락 뒤에 있는지 여부를 나타냅니다.:double-button더블 버튼 유사 클래스는 버튼과 트랙 조각에 적용됩니다.단추가 스크롤 막대의 동일한 끝에 함께 있는 단추 쌍의 일부인지 여부를 탐지하는 데 사용됩니다.트랙 조각의 경우 트랙 조각이 한 쌍의 버튼에 닿는지 여부를 나타냅니다.:single-button단일 버튼 유사 클래스는 버튼 및 트랙 조각에 적용됩니다.단추가 스크롤 막대 끝에 있는지 여부를 탐지하는 데 사용됩니다.트랙 피스의 경우 트랙 피스가 싱글톤 버튼에 닿는지 여부를 나타냅니다.:no-button트랙 조각에 적용되며 트랙 조각이 스크롤 막대의 가장자리까지 실행되는지 여부를 나타냅니다. 즉, 트랙의 끝에 버튼이 없습니다.:corner-present모든 스크롤 막대 조각에 적용되며 스크롤 막대 모서리가 있는지 여부를 나타냅니다.:window-inactive모든 스크롤 막대 조각에 적용되며 스크롤 막대를 포함하는 창이 현재 활성화되어 있는지 여부를 나타냅니다. 최근의 야행성에서는 이 유사 클래스가 :: 선택에도 적용됩니다.어떤 콘텐츠와도 연동할 수 있도록 확장하고 새로운 표준 유사 클래스로 제안할 계획입니다.)
이러한 조합의 예
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }
Chrome에 대한 추가 정보
addWindowsScrollHandler 공용 정적 핸들러등록 addWindowsScrollHandler(Windows).ScrollHandler 핸들러
창을 추가합니다.ScrollEvent handler Parameters: handler - handler Returns: 핸들러 등록 [source](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler) )을 반환합니다.
모질라
Mozilla에는 스크롤 막대를 조작하기 위한 일부 확장 기능이 있지만 모두 사용하지 않는 것이 좋습니다.
-moz-scrollbars-none이 대신 overflow:hidden을 사용할 것을 권장합니다.-moz-scrollbars-horizontaloverflow-x overflow-x 와 합니다.-moz-scrollbars-vertical합니다.-moz-hidden-unscrollable사용자 프로필 설정 내에서만 내부적으로 작동합니다.XML 루트 요소 스크롤을 비활성화하고 화살표 키와 마우스 휠을 사용하여 웹 페이지 스크롤을 비활성화합니다.
Mozilla에 대한 추가 정보
제가 아는 한 이것은 실제로 유용하지는 않지만 Firefox에서 스크롤 막대를 표시할지 여부를 제어하는 속성은 다음과 같습니다(참조 링크).
- 속성: 스크롤 막대
- 유형: nsIDOMBarProp
- 설명:창에 스크롤 막대를 표시할지 여부를 제어하는 개체입니다.이 속성은 JavaScript에서 "바꾸기 가능"합니다.읽기 전용
마지막으로, 패딩은 마술과 같습니다.
앞서 일부 다른 답변에서 언급한 것처럼 충분히 설명할 수 있는 그림이 있습니다.
역사 수업
단지 궁금해서 스크롤바의 기원에 대해 알고 싶었고, 이것들이 제가 찾은 최고의 참고 자료입니다.
- 스크롤 및 스크롤바에 관한 10가지 발명품
- https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
- https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt
여러가지 종류의
HTML5 사양 초안에서는 스크롤 막대가 iFrames에 나타나지 않도록 속성을 정의하여 페이지의 주변 콘텐츠와 혼합할 수 있도록 했습니다.그러나 이 요소는 최신 버전에 나타나지 않습니다.
그scrollbar는 BarProp의 하위 입니다.window스크롤 메커니즘 또는 유사한 인터페이스 개념을 포함하는 사용자 인터페이스 요소를 나타냅니다. window.scrollbars.visible돌아올 것입니다true스크롤 막대가 표시되는 경우
interface Window {
// The current browsing context
readonly attribute WindowProxy window;
readonly attribute WindowProxy self;
attribute DOMString name;
[PutForwards=href] readonly attribute Location location;
readonly attribute History history;
readonly attribute UndoManager undoManager;
Selection getSelection();
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
void close();
void focus();
void blur();
// Truncated
History API에는 페이지 로드 시 스크롤 위치를 유지하기 위해 페이지 탐색 시 스크롤 복원 기능도 포함되어 있습니다.
window.history.scrollRestoration하는 데 할 수 .="auto"/"manual"자동이 기본값입니다.수동으로 변경하면 사용자가 앱의 기록을 이동할 때 필요한 스크롤 변경사항에 대한 소유권을 개발자가 갖게 됩니다.필요한 경우 history.pushState()로 기록 항목을 푸시할 때 스크롤 위치를 추적할 수 있습니다.
---
자세한 내용:
- 위키백과의 스크롤 막대
- 스크롤 막대(Windows)
- 스크롤 방법
- 스크롤 방법 - Microsoft Dev Network
- Github의 iScroll(위의 첫 번째 섹션 참조)
- Jakob Nielsen의 유용성에 대한 기사 스크롤 및 스크롤바
예
에 설정body다음과 같은 태그:
<style type="text/css">
body {
overflow: hidden;
}
</style>
위의 코드는 수평 및 수직 스크롤 막대를 모두 "숨깁니다."
수직 스크롤 막대만 숨기려면 다음을 사용합니다.
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
수평 스크롤 막대만 숨기려면 다음을 사용합니다.
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
내용은 패딩 상자에 맞게 필요한 경우 잘립니다.스크롤 막대가 제공되지 않으며, 스크롤 휠을 끌거나 사용하는 등 사용자가 스크롤할 수 있도록 지원하지 않습니다.콘텐츠는 프로그래밍 방식으로 스크롤할 수 있으므로(예: )와 같은 속성 값을 설정하여) 요소는 여전히 스크롤 컨테이너입니다.(source)
이론적으로 모든 최신 브라우저를 다루는 솔루션은 다음과 같습니다.
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html스크롤 막대를 숨기려는 요소로 대체할 수 있습니다.
참고: 제가 게시하는 코드가 이미 적용되었는지 확인하기 위해 나머지 19개의 답변을 훑어보았는데, 많은 답변이 훌륭한 세부 사항으로 설명되지만 2019년 현재 상황을 요약하는 단 하나의 답변도 없는 것 같습니다.다른 사람이 이런 말을 했는데 제가 놓쳤다면 죄송합니다.
포장지를 사용하여 이 작업을 수행할 수 있습니다.div, 에 있는 것은 그것숨을기고는내르은넘면흐, 그것은쳐▁that은입니다.div로 설정한.auto.
div의 스크롤 바, 바깥쪽에서 꺼낼 수 있습니다.div하여 의 를 표시합니다div그런 다음 내용이 보기 상태로 유지되도록 내부 div에 동일한 패딩을 적용합니다.
###HTML
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
###CSS
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
이것은 간단한 CSS 속성으로 나에게 효과가 있습니다.
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
Firefox의 다음을합니다.overflow: -moz-scrollbars-none;
아직 관심이 있으시다면 제가 해결책을 찾은 것 같습니다.이번 주가 첫 주지만 효과가 있었어요
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
모바일 장치용 스크롤 막대를 숨길 수 있는 솔루션을 찾고 있다면 Peter의 대답을 따르십시오.
아래 솔루션을 사용하여 가로 스크롤 막대를 숨기는 jsfidle이 있습니다.
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
Android 4.0.4(Native Browser와 Chrome 모두에서 아이스크림 샌드위치)가 설치된 삼성 태블릿과 iOS 6(Safari와 Chrome 모두에서)이 설치된 iPad에서 테스트되었습니다.
, CSS 다른사이말이했듯를, CSS 요세사하용미이를 합니다.overflow.
그러나 사용자가 스크롤 막대를 표시하지 않고 해당 콘텐츠를 스크롤할 수 있도록 하려면 JavaScript를 사용해야 합니다.
솔루션에 대한 답변은 여기에서 확인하십시오.마우스/키보드로 스크롤할 수 있는 동안 스크롤 막대 숨기기
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
다음은 몇 가지 예입니다.
피터의 대답 외에도:
#element::-webkit-scrollbar {
display: none;
}
이것은 Internet Explorer 10에서도 동일하게 작동합니다.
#element {
-ms-overflow-style: none;
}
스크롤 막대를 숨기기 위한 브라우저 간 접근 방식입니다.
Edge, Chrome, Firefox 및 Safari에서 테스트되었습니다.
마우스 휠로 스크롤할 수 있는 동안 스크롤 막대를 숨깁니다!
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}
스크롤을 사용하려면 스크롤 막대를 숨기기 전에 스타일을 지정하는 것이 좋습니다.최신 버전의 OS X와 모바일 OS에는 마우스로 잡기에는 비현실적이지만 상당히 아름답고 중립적인 스크롤 바가 있습니다.
스크롤바를 숨기려면 터치패드가 없는 파이어폭스 사용자가 휠이 달린 마우스를 사용하지 않는 한 스크롤할 방법이 없는 경우를 제외하고는 John Kurlak의 기술이 잘 작동합니다. 하지만 그들은 보통 세로 스크롤만 할 수 있습니다.
John의 기술은 세 가지 요소를 사용합니다.
- 스크롤 막대를 마스킹하는 외부 요소입니다.
- 스크롤 막대를 가질 중간 요소입니다.
- 그리고 중간 요소의 크기를 설정하고 스크롤 막대를 갖도록 하는 내용 요소.
외부 요소와 내용 요소의 크기를 동일하게 설정하여 사용률을 제거할 수 있어야 하지만 올바른 조정으로 작동하지 않는 다른 것은 생각할 수 없습니다.
저의 가장 큰 관심사는 모든 버전의 브라우저가 스크롤바를 설정하여 오버플로된 콘텐츠를 볼 수 있는지 여부입니다.저는 현재 브라우저에서 테스트했지만 이전 브라우저에서는 테스트하지 않았습니다.
%size {
// set width and height
}
.outer {
// mask scrollbars of child
overflow: hidden;
// set mask size
@extend %size;
// has absolutely positioned child
position: relative;
}
.middle {
// always have scrollbars.
// don't use auto, it leaves vertical scrollbar showing
overflow: scroll;
// without absolute, the vertical scrollbar shows
position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
display: none;
}
.content {
// push scrollbars behind mask
@extend %size;
}
테스트
OS X는 10.6.8입니다.Windows는 Windows 7입니다.
- Firefox 32.0 스크롤 막대가 숨겨져 있습니다.마우스 휠과 트랙패드의 손가락 두 개만 있으면 화살표 키가 스크롤되지 않습니다. OS X 및 Windows(윈도우).
- Chrome 37.0 스크롤 막대가 숨겨져 있습니다.화살표 키는 클릭하여 초점을 맞춘 후에 작동합니다.마우스 휠 및 트랙패드가 작동합니다.OS X 및 Windows.
- Internet Explorer 11 스크롤 막대가 숨겨졌습니다.화살표 키는 클릭하여 초점을 맞춘 후에 작동합니다.마우스 휠이 작동합니다.창문들.
- Safari 5.1.10 스크롤 막대가 숨겨져 있습니다.화살표 키는 클릭하여 초점을 맞춘 후에 작동합니다.마우스 휠 및 트랙패드가 작동합니다.OS X.
- Android 4.4.4 및 4.1.2.스크롤 막대가 숨겨집니다.터치 스크롤이 작동합니다.4.4.4에서 Chrome 37.0, Firefox 32.0 및 HTML Viewer로 시도했습니다.HTML Viewer에서 페이지는 마스킹된 콘텐츠의 크기이며 스크롤할 수도 있습니다!스크롤은 페이지 확대/축소와 상호 작용합니다.
이 질문을 읽는 다른 사람들에게 그 설정을 지적하고 싶습니다.overflow: hidden(또는 의 ( overflow-y는 다음과 같습니다body요소가 스크롤 막대를 숨기지 않았습니다.
나는 그것을 사용해야 했습니다.html원소의
스크롤 막대를 숨기기 위해 이 CSS 코드를 고객 코드에 복사합니다.
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
내 HTML은 다음과 같습니다.
<div class="container">
<div class="content">
</div>
</div>
을 당신의 니추합다에 추가하세요.div스크롤 막대를 숨길 위치:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
그리고 이것을 용기에 추가합니다.
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
자동 숨기기, 작은 버전, 스크롤 전용 -y 또는 전용 -x와 같은 옵션을 사용하여 WebKit 버전을 작성했습니다.
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
http://codepen.io/hicTech/pen/KmKrjb
내 대답은 스크롤될 것입니다.overflow:hidden;jQuery 용사 사용:
예를 들어, 마우스 휠을 사용하여 수평으로 스크롤합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
저는 당신이 그것을 조작할 수 있다고 믿습니다.overflowCSS 속성이지만 브라우저 지원이 제한되어 있습니다.한 소식통은 그것이 Internet Explorer 5(이상), Firefox 1.5(이상), Safari 3(이상)이라고 말했는데, 아마도 당신의 목적에 충분할 것입니다.
스크롤링, 스크롤링, 스크롤링은 좋은 토론을 합니다.
막대를 하려면 세로스크막대비하려면다추다음니가합을화활성을 추가하면 .overflow-y:hidden;.
자세한 내용은 다음을 참조하십시오.
스크롤 막대를 숨기기 위해 CSS를 사용할 수 있습니까?어떻게 하시겠습니까?
브라우저 뷰포트에서 수직(및 수평) 스크롤바를 제거하려면 다음을 추가합니다.
style="position: fixed;"
에▁<body>원소의
Javascript:
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}
피터의 대답 외에도:
iframe에서 스크롤 막대를 제거하려는 경우, iframe이 설정된 웹 사이트 내에서 스크롤 막대를 제거하는 스타일을 추가해야 합니다.스크롤 막대를 포함한 iframe 내에서 요소 스타일을 지정할 수 없습니다.
iframe이 있는 웹 사이트:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<iframe src="/iframe"></iframe>
</body>
</html>
iframed 웹 사이트:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<style>
html, body {
margin: 0;
padding: 0
}
.content {
scrollbar-width: none;
}
.content::-webkit-scrollbar {
display: none;
}
.content {
height: 100vh;
overflow: scroll;
}
</style>
<body>
<div class="content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
언급URL : https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page
'programing' 카테고리의 다른 글
| 스토어를 여는 데 사용된 모델이 스토어를 만드는 데 사용된 모델과 호환되지 않습니다. (0) | 2023.06.01 |
|---|---|
| Node.jsfs.readdir 재귀 디렉터리 검색 (0) | 2023.06.01 |
| getApplication() vs. getApplicationContext() (0) | 2023.06.01 |
| Jest를 사용하여 단일 파일을 테스트하려면 어떻게 해야 합니까? (0) | 2023.06.01 |
| ng: angular-cli를 사용하여 새 프로젝트를 만드는 동안 명령을 찾을 수 없습니다. (0) | 2023.06.01 |