태그 보관물: css

css

스크롤 막대를 숨기지 만 여전히 스크롤 할 수는 있지만 있기를 원합니다. Chrome에서는 다음과

스크롤 막대가 표시되지 않고 전체 페이지를 스크롤 할 수 있기를 원합니다.

Chrome에서는 다음과 같습니다.

::-webkit-scrollbar {
    display: none;
}

그러나 Mozilla Firefox 및 Internet Explorer는 그렇게 작동하지 않는 것 같습니다.

나는 또한 CSS에서 이것을 시도했다 :

overflow: hidden;

스크롤 막대가 숨겨 지지만 더 이상 스크롤 할 수 없습니다.

전체 페이지를 계속 스크롤하면서 스크롤 막대를 제거 할 수있는 방법이 있습니까?

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 */
}

일 바이올린

자바 스크립트 :

스크롤바 너비는 브라우저마다 다르기 때문에 JavaScript로 처리하는 것이 좋습니다. 그렇게 Element.offsetWidth - Element.clientWidth하면 정확한 스크롤 막대 너비가 나타납니다.

자바 스크립트 작업 바이올린

또는

사용하여 Position: absolute,

#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;
}

일 바이올린

자바 스크립트 작업 바이올린

정보:

이 답변을 바탕으로 간단한 스크롤 플러그인을 만들었습니다 .

답변

선택적 스타일링으로 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의 경우 다음을 사용하십시오. overflow: -moz-scrollbars-none;

답변

최신 정보:

Firefox는 이제 CSS를 사용하여 스크롤바 숨기기를 지원하므로 모든 주요 브라우저 (Chrome, Firefox, Internet Explorer, Safari 등)에 적용됩니다.

스크롤바를 제거하려는 요소에 다음 CSS를 적용하기 만하면됩니다.

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

이것은 내가 현재 알고있는 가장 해킹 된 크로스 브라우저 솔루션입니다. 데모를 확인하십시오.

원래 답변 :

아직 언급되지 않은 다른 방법이 있습니다. 정말 간단하며 두 개의 div와 CSS 만 포함됩니다. JavaScript 또는 독점 CSS가 필요하지 않으며 모든 브라우저에서 작동합니다. 컨테이너의 너비를 명시 적으로 설정할 필요가 없으므로 유동적입니다.

이 방법은 음수 여백을 사용하여 스크롤 막대를 부모 밖으로 이동 한 다음 같은 양의 패딩을 사용하여 내용을 원래 위치로 되돌립니다. 이 기술은 수직, 수평 및 양방향 스크롤에 사용됩니다.

시민:

수직 버전의 예제 코드 :

HTML :

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS :

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

답변

사용하다:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

이것은 스크롤 막대가없는 겹치는 div로 스크롤 막대를 약간 겹치는 트릭입니다.

::-webkit-scrollbar {
    display: none;
}

이것은 WebKit 브라우저 에만 해당됩니다 . 또는 브라우저 별 CSS 컨텐츠를 사용할 수도 있습니다 (향후에있을 경우). 모든 브라우저는 각각의 막대에 대해 서로 다른 특성을 가질 수 있습니다.

마이크로 소프트 에지 사용을 위해 : -ms-overflow-style: -ms-autohiding-scrollbar;나 -ms-overflow-style: none;같은 MSDN 당 .

Firefox에는 해당 사항이 없습니다. 이를 달성하기위한 jQuery 플러그인이 있지만
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

답변

이 답변 에는 코드가 포함되어 있지 않으므로 다음 페이지 의 해결책이 있습니다 . .

페이지에 따르면이 접근법은 작동하기 위해 미리 스크롤 막대의 너비를 알 필요가 없으며 솔루션은 모든 브라우저에서도 작동하며 여기에서 볼 수 있습니다 .

좋은 점은 스크롤 막대를 숨기기 위해 패딩이나 너비 차이를 사용하지 않아야한다는 것입니다.

또한 줌 안전합니다. 패딩 / 너비 솔루션은 최소로 확대했을 때 스크롤 막대를 보여줍니다.

Firefox 수정 : http://jsbin.com/mugiqoveko/1/edit?output

.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>

스 니펫 확장

답변

다음 세 줄을 사용하면 문제가 해결됩니다.

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

여기서 liaddshapes는 스크롤이 오는 div의 이름입니다.