Làm cho thanh cuộn chính luôn hiển thị

Question

Cần có CSS ​​nào để làm cho thanh cuộn dọc của trình duyệt vẫn hiển thị khi người dùng truy cập trang web (khi trang không đủ nội dung để kích hoạt kích hoạt thanh cuộn)?

Answer 1

html { 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
} 

Điều này làm cho thanh cuộn luôn hiển thị và chỉ hoạt động khi cần.

Cập nhật: Nếu phần trên không hoạt động, việc sử dụng này có thể.

html { 
    overflow-y:scroll; 
} 

Answer 2

html { 
    overflow-y: scroll; 
} 

Đó có phải là những gì bạn muốn không?

Thật không may, Opera 9.64 dường như bỏ qua khai báo CSS đó khi áp dụng cho HTML hoặc BODY, mặc dù nó hoạt động cho các thành phần cấp khối khác như DIV.

Answer 3

html {height: 101%;} 

tôi sử dụng này giải pháp trình duyệt chéo(lưu ý: Tôi luôn luôn sử dụng khai báo DOCTYPE trong dòng 1, tôi không biết nếu nó hoạt động trong quirksmode, không bao giờ được thử nghiệm nó).

Điều này sẽ luôn hiển thị thanh cuộn dọc ACTIVE trong mỗi trang, thanh cuộn dọc sẽ chỉ có thể cuộn được vài pixel.

Khi nội dung trang là ngắn hơn so với vùng hiển thị của trình duyệt (cổng xem), bạn sẽ vẫn thấy thanh cuộn dọc hoạt động và chỉ cuộn được vài pixel.

Trong trường hợp bạn bị ám ảnh với xác nhận CSS (tôi obesessed chỉ với xác nhận HTML) bằng cách sử dụng giải pháp này mã CSS của bạn cũng sẽ xác nhận cho W3C bởi vì bạn đang không sử dụng tiêu chuẩn CSS không thuộc tính như -moz-scrollbars-vertical

Answer 4

Setting chiều cao đến 101% là giải pháp của tôi cho vấn đề. Các trang của bạn sẽ không còn 'flick' khi chuyển đổi giữa các trang vượt quá chiều cao của chế độ xem và những trang không vượt quá.

Answer 5

Tôi có thể làm việc này bằng cách thêm nó vào thẻ body. Đẹp hơn cho tôi bởi vì tôi không có gì trên phần tử html.

body { 
    overflow-y: scroll; 
} 

Answer 6

Mọi thứ đã thay đổi trong những năm qua. Các câu trả lời ở trên không hợp lệ trong mọi trường hợp nữa. Apple đang đẩy disappearing scrollbars ở mọi nơi. Safari, Chrome và thậm chí Firefox trên MacO (và iO) chỉ hiển thị thanh cuộn khi thực sự cuộn - Tôi không biết về Windows/IE hiện tại. Tuy nhiên có những cách phi tiêu chuẩn để tạo kiểu scroll bars trên Webkit (IE đã giảm một thời gian dài trước đây).

Answer 7

Một cách tiếp cận khác là đặt chiều rộng của phần tử html thành 100vw. Trên nhiều nếu không phải hầu hết các trình duyệt, điều này phủ nhận hiệu ứng của thanh cuộn trên chiều rộng.

html { width: 100vw; } 

Answer 8

Thêm mã này để stylesheet CSS của bạn:

html {overflow-y: scroll;} 

Đó là tất cả để có nó!

Answer 9

Đảm bảo tràn được đặt thành "cuộn" chứ không phải "tự động". Với điều đó nói rằng, trong OS X Lion, tràn bộ để "di chuyển" hoạt động giống như tự động trong thanh cuộn đó sẽ vẫn chỉ hiển thị khi được sử dụng. Vì vậy, nếu bất kỳ giải pháp nào trên đây dường như không hoạt động thì đó có thể là lý do tại sao.

Đây là những gì bạn sẽ cần phải sửa chữa nó:

::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 7px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, .5); 
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 
} 

Bạn có thể tạo kiểu nó cho phù hợp nếu bạn không thích mặc định.

Answer 10

body { height:101%; } sẽ "cắt" các trang lớn hơn.

Thay vào đó, tôi sử dụng:

body { min-height:101%; }