Cách ẩn thanh cuộn bằng cách sử dụng JavaScript

Question

Thanh cuộn có thể bị ẩn như thế nào? Tôi muốn làm điều này vì thanh cuộn không đẹp.

overflow:hidden không hữu ích vì phần tử div của tôi có nhiều yếu tố khác.

Vì vậy, thiết lập overflow không giải quyết được sự cố của tôi.

Answer 1

Bạn có thể ẩn thanh cuộn với điều này ...

document.body.style.overflow = 'hidden'; 

... và thôi ẩn nó với điều này:

document.body.style.overflow = 'visible'; 

Tuy nhiên, bạn phải đặt câu hỏi về bản thân cho dù đây là thực sự những gì bạn muốn. Thanh cuộn xuất hiện để mọi người có thể xem những thứ nằm ngoài màn hình nhỏ của họ.

Answer 2

Bạn phải sử dụng thuộc tính CSS overflow, 'quản lý' điều gì sẽ xảy ra khi nội dung của một phần tử nhất định vượt quá ranh giới của nó. Đặt nó thành hidden giấu thanh cuộn.

overflow: hidden; 

hoặc

someElement.style.overflow = 'hidden'; 

Answer 3

mắt của tôi bị tổn thương khi tôi đọc câu hỏi của bạn. Tuy nhiên, không thể ẩn thanh cuộn của trình duyệt mà không đặt "overflow: hidden" (?!). Đó là hành vi trình duyệt mặc định.

Vì div của bạn có nhiều yếu tố khác, tại sao bạn không đặt chiều rộng và chiều cao thích hợp cho nó? Nếu không, hãy làm cho nó có thể cuộn để người dùng hoàn toàn có thể đọc được nội dung của bạn.

Answer 4

Bạn cần phải ghi đè lên các thiết lập CSS như sau:

<style type="text/css"> 
    #YourSpecialDiv { overflow: hidden !important; } 
</style> 

Và div bạn nên thêm thẻ id tức

<div id="YourSpecialDiv"...>...</div> 

Answer 5

Cách tốt nhất để làm điều này sẽ là một số loại giả bộ chọn css phần tử. Nhưng tôi nghĩ rằng chỉ webkit (Chrome/Safari) has one for the scrollbar, do đó, nó không phải là rất nhiều trình duyệt.

Một thay thế hacky là để bọc nó trong một div mà giấu đi những thanh cuộn, bằng cách thiết lập width nhỏ hơn so với div chứa bởi kích thước của thanh cuộn

DEMO (có thể mất một thời gian để có được css hoàn hảo, nhưng bạn nhận được ý chính)

Vấn đề ở đây là kích thước thanh cuộn khác nhau trên mỗi trình duyệt, vì vậy bạn sẽ phải làm cho div ngoài lớn nhất của thanh cuộn chiều rộng nhỏ hơn. Và để không cắt bỏ bất kỳ nội dung nào trong trình duyệt bằng các thanh cuộn nhỏ hơn, tốt nhất nên thêm phần đệm của sự khác biệt kích thước lớn nhất cho các thanh cuộn.

Answer 6

Tôi không nghĩ rằng thực sự có một cách để chỉ ẩn thanh cuộn đúng cách. Điều gì overflow:hidden, overflow-x:hidden và overflow-y:hidden thực sự là 'nếu nó vượt quá 100vw/100vh/100vw một 100vh thì không hiển thị nó'. Lỗi tràn chỉ không hiển thị những gì bên ngoài chế độ xem hiện tại (tbh) hiện tại.

Nó ẩn thanh cuộn vì mọi thứ nằm trong HTML nên ở bên ngoài sẽ không nằm trên trang khi xem nó (không cần cuộn để không có thanh cuộn).

Các ẩn chỉ có sẵn là (ở đây để ẩn các thanh cuộn trục Y):

[container]{ 
    overflow:scroll; 
    overflow-x:hidden; 
} 

[container]::-webkit-scrollbar{ 
    width:0; 
    background-color:transparent; 
} 

Đó là một ẩn thực sự của thanh cuộn, và buồn bã chỉ hoạt động trên trình duyệt webkit-based.

Nếu một ngày tất cả các nhà cung cấp chấp nhận điều này thì nó sẽ thật tuyệt vời và cuối cùng chúng tôi sẽ có thể ẩn thanh cuộn.

Answer 7

var container = document.querySelectorAll("div.container")[0]; 
 
container.addEventListener("wheel", function(event) { 
 
    /*Mouse wheel scrolled down*/ 
 
    if (event.deltaY > 0) 
 
    container.scrollTop += 30; 
 

 
    /*Mouse wheel scrolled up*/ 
 
    else 
 
    container.scrollTop -= 30; 
 
}, false);

div.container { 
 
    height: 15rem; 
 
    width: 20rem; 
 
    overflow: hidden; 
 
    padding: 1rem; 
 
    border: 1px solid; 
 
    font-family: "Seoge UI", "Calibri", sans-serif; 
 
    font-size: 1.25rem; 
 
    line-height: 1.5rem; 
 
}

<div class="container"> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan. 
 
    Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales, 
 
    dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br 
 
    />diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br 
 
    />libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br 
 
    />Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum 
 
</div>

Answer 8

Bạn có thể sử dụng sau đây trên bất kỳ yếu tố:

::-webkit-scrollbar { 
    width: 0px; 
} 

Source

này chỉ hoạt động trên các trình duyệt webkit, vì vậy không IE và Firefox.