I want to be 스크롤할 수 없이 scrollbar 전체 페이지를 볼 수 있다.
::-webkit-scrollbar {
display: none;
}
하지만, 인터넷 익스플로러, 모질라 파이어폭스 don& 그렇게 작동합니까 t # 39 것으로 보인다.
난 또 이렇게 CSS 했다.
overflow: hidden;
내가 할 수 있는 방법이 있어야 한다는 scrollbar 분리하십시오 동시에 스크롤하지 전체 페이지를?
부트해 CSS 와 HTML, 제발.
그냥 테스트 디스크입니다. 정상적으로 작동하는.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
이후 다른 브라우저를 감당할 수 있는 것이 더 나은 다른 scrollbar 너버 JavaScript 와. ',' 엘레망스프세비데스 엘레망스클리엔트위데스 경우 정확한 scrollbar 너비가 무산되었다.
'사용하여 위치: 절대 ',
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
[ JavaScript apc® 바이올린 ] [4]
야, 내가 만든 이를 토대로 단순해졌습니다 스크롤해야 플러그인에는.
Webkit 에서 쉽게, 선택사양인 스타일.
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
이 간단한 작동됨 가져다줄래요 CSS 속성을:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
이전 버전의 Firefox 를 사용합니다. '오버플로입니다: - 모스 스크롤바 없음. '
또한 모든 주요 브라우저 firefox 는 이제 스크롤바 숨기기 때문에 이제 적용 (Internet& nbsp, 익스플로러, 크롬, 파이어폭스, 사파리, etc.).
Css 를 다음과 같이 간단히 제거할 요소는 적용하십시오 스크롤바 출처:
"'css 랭 스콘타이너 { 오버플로입니다 y: 스크롤해야. scrollbar 너버: 없음; / Firefox /
이 메서드는 math. 음의 여백 이동합니까 scrollbar 빼냅니다 모피쳐 그리곤요 동일한 양의 패딩 푸시할 컨텐트에서 원래 위치로 돌아갈 것이다. 이 기법은 수직, 수평 및 양방향 스크롤하십시오 근무한다.
데모:
예제 코드) 의 수직 버전:
HTML:
"'html 로 div class = " parent" > <;;; div class = " child" > <;;; 네 컨텐트입니다. < /div>; < /div>; "'
CSS.
"'css 랭 자파렌트 { 가로: 400px. 높이: 200px. 경계: 1px 솔리드로 # AAA, 오버플로입니다: 숨겨짐. }
스차일드 { 높이: 100%, 마진 오른쪽: - 50px. / 최대 폭을 scrollbar / 패딩 오른쪽: 50px. / 최대 폭을 scrollbar / 오버플로입니다 y: 스크롤해야. } "'
사용:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
이것은 속임수 div 에 있는, 다소 중첩됩니다 scrollbar 중첩되도록 doesn& # 39 모든 화면 이동난 없다.
::-webkit-scrollbar {
display: none;
}
이것은 단지 장치당 웹킷 브라우저. 브라우저 별 내용 (있을 경우 향후) 또는 CSS 를 사용할 수 있습니다. 다른 모든 브라우저 및 특정 속성을 가질 수 있으며 각각의 막대에서는.
마이크로소프트 엣지 대한 사용: '밀리초입니다 오버플로입니다 스타일: - 밀리초입니다 오토 시딩 scrollbar, '또는' 밀리초입니다 오버플로입니다 스타일: 없음 '으로 호스트당 MSDN.
모질라 파이어폭스 avamer 없다. Jquery 는 이를 위해 플러그인에는 있긴 했지만, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
이 오토메이티드 # 39, t, 여기서는 doesn& 코드가 포함된 솔루션을 통해 페이지:
좋은 건 어쩔 수 없이 패딩이나 너버 차이를 scrollbar 숨김니다 사용할 수 없습니다.
이 역시 확대/축소 금고에도요 이 때 최소 scrollbar padding/width 솔루션뀉뀉뀉뀉 보여 줌.
Firefox 수리입니다: 출력입니다 http://jsbin.com/mugiqoveko/1/edit?
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>
끝 - < 스니핏 >;!
<div class="parent">
<div class="child">
</div>
</div>
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
이에 따라 CSS 적용하십시오.
체크 [here] (
) (nbsp, 익스플로러, 파이어폭스, 테스트를 Internet&).사용:
"'css 랭
오버플로입니다: 숨겨짐. 가로: 500px. 경계: 1px 솔리드로 rgba (0, 0, 0, 1.00), }
가로: 515px. 높이: 300px; 오버플로입니다 y: 자동. 오버플로입니다 x: 숨겨짐. 불투명도의: 10%, }
가로: 511px. 배경색: rgba (123, 8, 10, 0.42); } "'
"'html 로 < body>; div id = " subparent" > <;;; div id = " parent" > <;;; div id = " child" > <;;; 코드, 여기 스크롤해야 - > <! < /div>; < /div>; < /div>; < /body>; "'
11일 12월 2018년 기준 (Firefox 64 잔인하니) 로 매우 간단한 Firefox 는 이제 그 질문에 대한 해답을 64+ CSS 스타일 사양명세 Scrollbar.
그냥 다음 CSS.
scrollbar-width: none;
Firefox 64 릴리스에는 참고 링크 here.
사용
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
바로 이러한 기능을 운영까지도 로드하기에 또는 언로드하면 또는 언제든 다시 로드하십시오 스크롤바. 하지만 나는 아직 그 테스트되었습니다 scrollable as I 에서 크롬 브라우저 크롬, 다른 확실하지 않습니다.
내 문제: 난 내 스타일에 t want don& # 39, HTML 컨텐트입니다. I want my body, 단, 작업 세로 스크롤 없이 직접 scrollable scrollbar CSS 격자선 모든 화면 크기.
이 기입란 사이징하는 컨텐트입니다 기입란 수행됨 패딩이나 여백 솔루션, 그들은 기입란 사이징하는 가치 영향.
난 아직도 필요한 moz-scrollbars-none" " -; 마치 내가 그도르프 및 Mr_Green 디렉티브을 및 숨김니다 scrollbar 했다. '만', '와' 모스 패딩 시작 모스 변형 노력했다고 하지만, 너무 많은 영향을 줄 수 있는 firefox 는 응답성의 부작용은요 필요로 하는 작업.
이 솔루션을 사용할 수 있는 HTML 바디입니다 " 콘텐츠, 디스플레이: grid". 스타일, 이는 응답성의.
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}
이 작품은 가져다줄래요 크로스 브라우저. 그러나 이 doesn& # 39, t 모바일 브라우저 네이티브 스크롤바 숨기십시오.
"'css .hide-native-scrollbar { scrollbar 너버: 없음; / Firefox 64 /
'' 휠 이벤트 현대의 브라우저를 사용할 수 있습니다.
// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll down
content.scrollTop += step;
else // Scroll up
content.scrollTop -= step;
});
This is how I do it for 가로 이동줄이. 전용 CSS 와 같은 작품을 잘 프레임워크와도 부트스트랩에 / col-*. 이 두 개의 추가 데이터만 div 와 상위입니다 최대 폭 폭 '또는' a '와' '세트:
선택할 수 있도록 텍스트 스크롤하거나 스크롤하십시오 있으면 함께 이 손가락 터치.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor: pointer
}
/* The following classes are only here to make the example looks nicer */
.row {
width: 100%
}
.col-xs-4 {
width: 33%;
float: left
}
.col-xs-3 {
width:25%;
float:left
}
.bg-gray {
background-color: #DDDDDD
}
.bg-orange {
background-color:#FF9966
}
.bg-blue {
background-color: #6699FF
}
.bg-orange-light{
background-color: #FFAA88
}
.bg-blue-light{
background-color: #88AAFF
}
<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
끝 - < 스니핏 >;!
파선-짧은 버전을 게으른 사람:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor:pointer
}
/* The following classes are only here to make the example looks nicer */
.parent-style {
width: 100px;
background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
끝 - < 스니핏 >;!
안쪽 div 에 사용된 ',' 추가 여백을 현재 수락됨 # 39 라고 won& 사용할 경우, 어떤 이유로 '상자 모델 빗나갔다. 국경 기입란 '.
두 경우 모두 무엇을 작업하십시오 안쪽 div '와' 는 원거리일수록 너비입니다 scrollbar& 100% # 39 의 너버 사용한다고 가정할 때 '오버플로입니다: '에 숨겨진 바깥 div).
예를 들어, CSS.
.container2 {
width: calc(100% + 19px);
}
크로스 브라우저 자바스크립트, in:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
이는 디비시 봉양 솔루션이므로 노나리스 노력해야 할 수 있는 모든 브라우저.
이렇다 할 필요가 있는 인사이드라면 수정표시와 및 상대 위치 (및 해당 너버 설정해야 합니다, 예를 들어 400 픽셀입니다):
"'html 로 div class = " hide-scrollbar" > <;;; div class = " scrollbar" > <;;; div class = " scrollbar-inner" > <;;;
< /div>; < /div>; < /div>; "'
Css.
"'css 랭 .hide-scrollbar { 오버플로입니다: 숨겨짐. 위치: 절대. top: 0; 왼쪽: 0; 오른쪽: 0; 아래쪽: 0; }
지스크로예바 { 오버플로입니다 y: 스크롤해야. 위치: 절대. top: 0; 왼쪽: 0; 오른쪽: - 50px. 아래쪽: 0; }
.scrollbar-inner { 가로: 400px. } "'
이는 당시 본문:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
</div>
< /div>;
그리고 이건 CSS.
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}