it-swarm-vi.com

Âm thanh thanh, tôn trọng

Tôi muốn có thể cuộn qua toàn bộ trang, nhưng không hiển thị thanh cuộn.

Trong Google Chrome, nó:

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

Nhưng Mozilla Firefox và Internet Explorer dường như không hoạt động như vậy.

Tôi cũng đã thử điều này trong CSS:

overflow: hidden;

Điều đó không ẩn thanh cuộn, nhưng tôi không thể cuộn nữa.

Có cách nào để tôi có thể gỡ bỏ thanh cuộn trong khi vẫn có thể cuộn toàn bộ trang không? Chỉ với CSS hoặc HTML, xin vui lòng.

868
Oussama Dooby

Chỉ cần một bài kiểm tra đang hoạt động tốt.

#parent{
    height: 100%;
    width: 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 */
}

Làm việc Fiddle

JavaScript:

Vì, chiều rộng của thanh cuộn khác nhau trong các trình duyệt khác nhau, tốt hơn là xử lý nó bằng JavaScript. Nếu bạn làm Element.offsetWidth - Element.clientWidth, chiều rộng thanh cuộn chính xác sẽ hiển thị.

JavaScript hoạt động Fiddle

hoặc là

Sử dụng Position: absolute,

#parent{
    height: 100%;
    width: 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;
}

Làm việc Fiddle

JavaScript hoạt động Fiddle

Thông tin:

Dựa trên câu trả lời này, tôi đã tạo một plugin cuộn đơn giản . Tôi hy vọng điều này sẽ giúp được ai đó.

654
Mr_Green

Thật dễ dàng trong WebKit, với kiểu dáng tùy chọn:

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;
}
284
Anirban Bhui

Điều này làm việc với tôi với các thuộc tính CSS đơn giản:

.container {
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

CẬP NHẬT: đã thêm thuộc tính scrollbar-width mới cho Firefox.

Đối với các phiên bản Firefox cũ hơn, hãy sử dụng: overflow: -moz-scrollbars-none;

151
Hristo Eftimov

CẬP NHẬT: Firefox hiện hỗ trợ ẩn thanh cuộn bằng CSS, vì vậy tất cả các trình duyệt chính hiện đã được trình bày (Chrome, Firefox, IE, Safari, v.v.).

Chỉ cần áp dụng CSS sau đây cho phần tử bạn muốn xóa thanh cuộn khỏi:

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

Đây là giải pháp trình duyệt chéo ít hack nhất mà tôi hiện đang biết. Kiểm tra bản demo.


TRẢ LỜI GỐC:

Đây là một cách khác chưa được đề cập. Nó thực sự đơn giản và chỉ liên quan đến hai div và CSS. Không cần JavaScript hoặc CSS độc quyền và nó hoạt động trong tất cả các trình duyệt. Nó không yêu cầu thiết lập rõ ràng chiều rộng của thùng chứa hoặc do đó làm cho nó lỏng.

Phương pháp này sử dụng lề âm để di chuyển thanh cuộn ra khỏi cha mẹ và sau đó cùng một lượng đệm để đẩy nội dung trở về vị trí ban đầu. Kỹ thuật này hoạt động cho cuộn dọc, ngang và cuộn hai chiều.

Bản trình diễn:

Mã ví dụ cho phiên bản dọc:

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;
}
124
Richrd

Sử dụng:

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

Đây là một mẹo để phần nào trùng lặp thanh cuộn với một div chồng chéo mà không có bất kỳ thanh cuộn nào:

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

Điều này chỉ dành cho WebKit trình duyệt ... Hoặc bạn có thể sử dụng nội dung CSS dành riêng cho trình duyệt (nếu có trong tương lai). Mỗi trình duyệt có thể có một thuộc tính cụ thể và khác nhau cho các thanh tương ứng của chúng.

Đối với Microsoft Edge, hãy sử dụng: -ms-overflow-style: -ms-autohiding-scrollbar; hoặc -ms-overflow-style: none;trên mỗi MSDN .

Không có tương đương với Firefox. Mặc dù có một plugin jQuery để đạt được điều này, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

70
Arpit Singh

Câu trả lời này không bao gồm mã, vì vậy đây là giải pháp từ trang :

Theo trang, cách tiếp cận này không cần biết chiều rộng của thanh cuộn trước để hoạt động và giải pháp cũng hoạt động cho tất cả các trình duyệt, và có thể được nhìn thấy tại đây .

Điều tốt là bạn không bị buộc phải sử dụng phần đệm hoặc chênh lệch chiều rộng để ẩn thanh cuộn.

Đây cũng là zoom an toàn. Các giải pháp đệm/chiều rộng hiển thị thanh cuộn khi thu phóng đến mức tối thiểu.

Sửa lỗi 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>
33
Timo Kähkönen

Chỉ cần sử dụng ba dòng sau và vấn đề của bạn sẽ được giải quyết:

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

Trong đó liaddshapes là tên của div nơi cuộn đến.

17
Innodel

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Áp dụng CSS phù hợp.

Kiểm tra nó tại đây (được thử nghiệm trong Internet Explorer và Firefox).

9
Mischa

Kể từ ngày 11 tháng 12 năm 2018 (Firefox 64 trở lên), câu trả lời cho câu hỏi này thực sự rất đơn giản vì Firefox 64+ hiện thực hiện thông số CSS Scrollbar Styling .

Chỉ cần sử dụng CSS sau đây:

scrollbar-width: none;

Liên kết ghi chú phát hành Firefox 64 tại đây .

7
Chris

Sử dụng:

#subparent{
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child{
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>
7
Owais

Sử dụng

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
}

Gọi các hàm này cho bất kỳ điểm nào bạn muốn tải hoặc dỡ hoặc tải lại thanh cuộn. Nó vẫn có thể cuộn trong Chrome khi tôi đã thử nghiệm nó trong Chrome, nhưng tôi không chắc các trình duyệt khác.

6
user43353

Vấn đề của tôi: Tôi không muốn bất kỳ kiểu nào trong html của mình, tôi muốn trực tiếp cơ thể của mình có thể cuộn mà không cần bất kỳ thanh cuộn nào và chỉ có một cuộn dọc, hoạt động với lưới css cho mọi kích thước màn hình.

kích thước hộp giá trị tác động đệm hoặc giải pháp lề, chúng hoạt động với box-sizing: content-box .

Tôi vẫn cần chỉ thị "-moz-scrollbars-none", và như gdoron và Mr_Green, tôi phải ẩn thanh cuộn. Tôi đã thử -moz-Transform và -moz-padding-start, chỉ tác động đến firefox, nhưng có những tác dụng phụ đáp ứng cần thiết cho nhiều công việc.

Giải pháp này hoạt động cho nội dung cơ thể html với kiểu "display: Grid" và nó rất nhạy.

/* 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;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  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;
}
5
Lucile Fievet

Trên các trình duyệt hiện đại, bạn có thể sử dụng wheel eventhttps://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
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;
});
5
Doua Beri

Thêm phần đệm vào một div bên trong, như trong câu trả lời hiện được chấp nhận, sẽ không hoạt động nếu vì lý do nào đó bạn muốn sử dụng box-model: border-box.

Điều gì làm việc trong cả hai trường hợp là tăng chiều rộng của div bên trong lên 100% cộng với chiều rộng của thanh cuộn (giả sử overflow: hidden trên div bên ngoài).

Ví dụ: trong CSS:

.container2 {
    width: calc(100% + 19px);
}

Trong Javascript, trình duyệt chéo:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
4
herman

Đây là cách tôi thực hiện để cuộn ngang, chỉ CSS và hoạt động tốt với các khung như bootstrap/col- *. Nó chỉ cần thêm 2 div và cha mẹ với tập chiều rộng hoặc chiều rộng tối đa:

Bạn có thể chọn văn bản để làm cho nó cuộn hoặc cuộn nó bằng ngón tay nếu bạn có màn hình cảm ứng.

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

Phiên bản ngắn dành cho người lười biếng:

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

Điều này hoạt động với tôi trên nhiều trình duyệt, tuy nhiên, điều này không ẩn các thanh cuộn gốc trên các trình duyệt di động

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* IE 11 */
  &::-webkit-scrollbar { /** Webkit */
    display: none;
  }
}
4
Murhaf Sousli

Điều này làm việc cho tôi:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar{
    width: 0;
}
3
mangesh

perfect-scrollbar plugin dường như là cách để đi, xem: https://github.com/noraesae/perinf-scrollbar

Nó là tài liệu tốt và hoàn thành giải pháp dựa trên JS cho vấn đề thanh cuộn.

Trang demo: http://noraesae.github.io/perinf-scrollbar/

3
jmarceli

Đây là một giải pháp siêu viêm mà không cần làm việc cho tất cả các trình duyệt ...

Đánh dấu như sau và cần phải ở trong một cái gì đó có định vị tương đối (và chiều rộng của nó phải được đặt, ví dụ 400px):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}
3
user3638471

Điều này sẽ ở cơ thể:

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

Và đây là CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}
3
Hilla

Tôi tình cờ thử các giải pháp trên trong dự án của mình và vì một số lý do tôi không thể ẩn thanh cuộn do định vị div. Do đó, tôi quyết định ẩn thanh cuộn bằng cách giới thiệu một div bao phủ nó một cách hời hợt. Ví dụ dưới đây dành cho thanh cuộn ngang:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

CSS tương ứng như sau:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}
3
Sriram Ranganathan

Phần sau đây hoạt động với tôi trên Microsoft, Chrome và Mozilla cho một yếu tố div cụ thể:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}
2
Meloman

Một cách tiếp cận hacky khác là thực hiện overflow-y: hidden và sau đó cuộn phần tử bằng tay như thế này:

function detectMouseWheelDirection( e ) {
  var delta = null, direction = false;
  if ( !e ) { // if the event is not provided, we get it from the window object
    e = window.event;
  }
  if ( e.wheelDelta ) { // will work in most cases
    delta = e.wheelDelta / 60;
  } else if ( e.detail ) { // fallback for Firefox
    delta = -e.detail / 2;
  }
  if ( delta !== null ) {
    direction = delta > 0 ? -200 : 200;
  }

  return direction;
}

if ( element.addEventListener ) {
 element.addEventListener( 'DOMMouseScroll', function( e ) {
   element.scrollBy({ 
     top: detectMouseWheelDirection( e ),
     left: 0, 
     behavior: 'smooth' 
  });
 });
}

Có một bài viết tuyệt vời về cách phát hiện và xử lý các sự kiện onmousewheel trong deepmikoto's blog. Điều này có thể làm việc cho bạn, nhưng nó chắc chắn không phải là một giải pháp thanh lịch.

2
Gark Garcia

Tôi chỉ muốn chia sẻ một đoạn kết hợp để ẩn thanh cuộn mà tôi sử dụng khi phát triển. Nó là một tập hợp của một số đoạn được tìm thấy qua internet phù hợp với tôi:

    .container {
        overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */

        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }


    .container::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

Hy vọng bạn thấy điều này hữu ích: *

1
stamat

Một câu đố làm việc đơn giản khác :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Tràn ẩn trên bộ chứa cha mẹ và tự động tràn trên bộ chứa con. Đơn giản.

1
geoyws

Chỉ cần đặt chiều rộng của chiều rộng của trẻ thành 100%, đệm thành 15px, overflow-x để cuộn và tràn: ẩn cho cha mẹ và bất kỳ chiều rộng nào bạn muốn, nó hoạt động hoàn hảo trên tất cả các trình duyệt chính bao gồm IE Edge với ngoại lệ IE8 trở xuống.

0

2019: câu trả lời trên hoạt động.

bạn không cần thiết lập nền nhiều lần nhưng có một lỗi là đôi khi chiều cao của thanh cuộn hoạt động sai. cái này bạn có thể sửa theo quy định dưới đây

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

Tôi đã có vấn đề này, và nó rất đơn giản để khắc phục.

Nhận hai container. Bên trong sẽ là thùng chứa có thể cuộn của bạn và bên ngoài rõ ràng sẽ chứa bên trong:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Nó là siêu đơn giản và nên làm việc với bất kỳ trình duyệt.

0

Ẩn cả thanh cuộn ngang và trục.

Xem Fiddle tại đây

HTML

 <div id="container1">
    <div id="container2">
    <pre>

Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
    </pre>

    </div>
    <div>

CSS

* {
    margin:0;
}
#container1 {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#container2 {
    position: absolute;
    top: 0px;
    bottom: -15px;
    left: 0px;
    right: -15px;
    overflow: auto;
}
0
AnupRaj

bạn có thể sử dụng mã bên dưới ẩn cuộn nhưng trong khi vẫn có thể cuộn

.element::-webkit-scrollbar { width: 0 !important }
0
Tienanhvn