Ẩn thanh cuộn có tràn: cuộn được bật

Question

Tôi cần ẩn thanh cuộn trên div bị tràn: cuộn; được bật sao cho div sẽ cuộn bằng chuột và bàn phím nhưng thanh cuộn sẽ không được hiển thị.

là có cách nào để làm điều này với css hoặc là javascript cách để đi?

Answer 1

Bạn có thể đặt div cuộn bên trong div thứ hai có ẩn tràn, sau đó chỉ cần làm div bên trong rộng hơn và cao hơn một chút (số tiền có thể thay đổi tùy theo trình duyệt).

Something như thế này:

#outer { 
    overflow:hidden; 
    width:200px; 
    height:400px; 
    border:1px solid #ccc; 
} 
#inner { 
    overflow:scroll; 
    width:217px; 
    height:417px; 
}​ 

Full dụ tại http://jsfiddle.net/uB6Dg/1/.

Edit: Đáng tiếc là bạn vẫn có thể tới thanh cuộn bằng cách bôi đen văn bản và kéo, và nó làm cho đệm vv hơn một chút đau đớn, nhưng khác hơn thế này tôi nghĩ javascript là con đường để đi.

Answer 2

Bạn có thể làm điều này bằng CSS thuần túy (ít nhất là trong trình duyệt webkit). Bạn phải sử dụng các lớp học giả cuộn đặc biệt để đạt được điều này

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

Đọc này xuất sắc blogpost để biết thêm thông tin.

Answer 3

Bạn cần phải tận dụng các plugin jquery từ trang web này http://jscrollpane.kelvinluck.com/

Answer 4

câu trả lời @Maloric chỉ cho tôi trong đúng hướng, tuy nhiên tôi cần chiều rộng chất lỏng, và tôi cũng muốn trở thành chính xác hơn về chiều rộng của thanh cuộn.

Đây là chức năng sẽ trả lại độ rộng chính xác của thanh cuộn dựa trên những gì trình duyệt báo cáo.

var getWidth = function() { 
 
    var scrollDiv = document.createElement('div'), 
 
     scrollbarWidth; 
 

 
    scrollDiv.style.overflow = 'scroll'; 
 
    document.body.appendChild(scrollDiv); 
 

 
    scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
 
    
 
    document.body.removeChild(scrollDiv); 
 

 
    return scrollbarWidth; 
 
}; 
 

 
var width = getWidth(); 
 
var container = document.querySelector('.overflowing-container'); 
 

 
container.style.paddingRight = width + 'px'; 
 
container.style.marginRight = (width * -1) + 'px'; 
 

 
// Just for testing purposes 
 
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()

.container { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: 500px; 
 
} 
 

 
.overflowing-container { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    width: 100%; 
 

 
}

<div class="container"> 
 
    <div class="overflowing-container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu. 
 

 
    Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere. 
 
    </div> 
 
</div> 
 

 
<div class="scrollbar-width"></div>

Đoạn trên cho thấy điều này trong hành động.