Chrome giữ dung lượng cho thanh cuộn ngay cả khi nó bị ẩn

Tôi đã gặp sự cố trên trình duyệt webkit (IE và FF là ok), nơi không gian thanh cuộn được dành riêng cho một phần tử mặc dù thanh cuộn không hiển thị. Bạn có thể thấy trong ví dụ rằng một khi phần giữa bị lơ lửng thì không gian thanh cuộn vẫn được đặt trước. Tôi chỉ tự hỏi nếu đây là vấn đề với Chrome hay chỉ là một phần của thông số HTML/CSS. Điều này tương tự question cung cấp một sửa chữa nhưng nó không giải thích nếu nó là một lỗi hay không và phải thiết lập một chiều rộng rõ ràng trên trẻ em không phải là những gì tôi muốn làm.Chrome giữ dung lượng cho thanh cuộn ngay cả khi nó bị ẩn

 .hidden-scroll { 
 
      background: black; 
 
      overflow-y: hidden; 
 
      height: 400px; 
 
      width: 300px; 
 
     } 
 

 
     .hidden-scroll:hover { 
 
      overflow-y: auto; 
 
     } 
 

 
     .no-hover.hidden-scroll:hover { 
 
      overflow-y: hidden; 
 
     } 
 

 
     .hidden-scroll-content { 
 
      background: red; 
 
      height: 50px; 
 
     }

<body> 
 
<div>No scroll needed</div> 
 

 

 
<div class="hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
</div> 
 

 
<div>Scroll on hover</div> 
 

 
<div class="hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
    <div class="hidden-scroll-content">5</div> 
 
    <div class="hidden-scroll-content">6</div> 
 
    <div class="hidden-scroll-content">7</div> 
 
    <div class="hidden-scroll-content">8</div> 
 
    <div class="hidden-scroll-content">9</div> 
 
    <div class="hidden-scroll-content">10</div> 
 
    <div class="hidden-scroll-content">11</div> 
 
    <div class="hidden-scroll-content">12</div> 
 
</div> 
 

 
<div>No scroll on hover</div> 
 

 
<div class="no-hover hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
    <div class="hidden-scroll-content">5</div> 
 
    <div class="hidden-scroll-content">6</div> 
 
    <div class="hidden-scroll-content">7</div> 
 
    <div class="hidden-scroll-content">8</div> 
 
    <div class="hidden-scroll-content">9</div> 
 
    <div class="hidden-scroll-content">10</div> 
 
    <div class="hidden-scroll-content">11</div> 
 
    <div class="hidden-scroll-content">12</div> 
 
</div> 
 

 

 
</body>

Nguồn

2014-09-19 pllee

Đây có thể là một lỗi trong Blink & Webkit. Bạn chắc chắn nên báo cáo điều này. Tôi đã thử nghiệm trong Firefox chỉ và nó hoạt động chính xác. Tôi đã thực hiện thêm một vài thử nghiệm và Chrome có vẻ hoạt động chính xác chỉ với văn bản. Đây là hành vi đúng http://jsfiddle.net/650pyaq2/1/ Hành vi này sai trái http://jsfiddle.net/re4o23zr/ – user3448600

Có vẻ như một lỗi, tôi nhận thấy rằng sau khi cài đặt lại chiều rộng mục (để bất kỳ giá trị tự động/100%) hộp được vẽ lại và đặt ra một cách chính xác cho đến khi di chuột khác, tốt, trong một khoảnh khắc làm thế nào về một số hack hack? Hacky demo

.wrapper { 
    height:400px; 
    width:300px; 
    overflow:hidden; 
} 

.wrapper:hover .hidden-scroll { 
    width:300px; 
} 

.wrapper:hover .hidden-scroll div { 
    padding-right:0; 
} 

.hidden-scroll { 
    background: black; 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 400px; 
    width: 330px; 
} 

.hidden-scroll div { 
    background: red; 
    height: 50px; 
    width: auto; 
    padding-right:30px; 
}

Nguồn

2015-04-28 22:51:43

tôi đã chạy vào một tình huống giống như bạn (tôi nghĩ), nơi tôi muốn khả năng di chuyển, nhưng tôi không muốn thanh cuộn. Tôi cũng đã đặt trong tùy chỉnh < và> điều khiển phân trang ở cuối các khu vực hiển thị để trang qua khu vực có thể cuộn. Vì vậy, các thanh cuộn chỉ gây phiền nhiễu cho tôi.

Bạn có thể bật các thanh cuộn off cho một tầng lớp nhất định với:

.class::-webkit-scrollbar { 
    width: 0 !important; 
    height: 0 !important; 
}

mà không Hight: 0, tôi đã nhìn thấy một vùng trống chiều cao của thanh cuộn và nó đã ăn vào nội dung. Khi tôi đã thêm chiều cao: 0 vào CSS này, nó đã biến mất và mọi thứ đều tốt.

Hy vọng điều này sẽ hữu ích.

Bây giờ tôi tắt để xem tôi có thể tìm thấy điều tương tự cho Edge, IE và Firefox hay không. Tính năng này hoạt động trên Chrome và Safari.

Nguồn

2016-08-07 01:56:20

Nếu bạn không muốn thanh cuộn để được nhìn thấy, thử (làm việc cho tôi)

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

Nguồn

2017-09-25 08:43:25 Vishnu

Chrome giữ dung lượng cho thanh cuộn ngay cả khi nó bị ẩn

Trả lời

Các vấn đề liên quan