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

CSS nào là bắt buộc để 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)?

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 thiết.

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

html {
    overflow-y:scroll;
}

Đảm bảo tràn được đặt thành "cuộn" chứ không phải "tự động". Như đã nói , trong OS X Lion, tràn được đặt thành "cuộn" hoạt động giống như tự động hơn 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 dường như không hoạt động thì đó có thể là lý do.

Đây là những gì bạn sẽ cần phải sử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 cho phù hợp nếu bạn không thích mặc định.

Mọi thứ đã thay đổi trong những năm qua. Các câu trả lời ở trên không còn giá trị trong mọi trường hợp nữa. Apple đang đẩy các thanh cuộn biến mất ở khắp 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 không chuẩn để định kiểu thanh cuộn trên Webkit (IE đã bỏ cách đây rất lâu).

html {
    overflow-y: scroll;
}

Đó là điều bạn muốn?

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

html {height: 101%;}

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

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

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

Trong trường hợp bạn bị ám ảnh bởi xác thực CSS (tôi chỉ tuân theo xác thực 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 thực cho W3C vì bạn không sử dụng các thuộc tính CSS không chuẩn như -moz-scrollbars-vertical

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%; }

Tôi đã có thể làm cho nó hoạt động bằng cách thêm nó vào thẻ body. Nó đẹp hơn đối với tôi vì tôi không có gì trên phần tử html.

body {
    overflow-y: scroll;
}

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 ảnh hưởng của thanh cuộn trên chiều rộng.

html { width: 100vw; }

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

body { 
    min-height: 101vh; 
} 

làm việc tốt nhất cho tôi

Tôi làm việc này:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Sau đó, tôi không phải nhìn vào thanh cuộn màu xám xấu xí khi không cần thiết.