Như đã đề cập trong tiêu đề, có thể tính toán vwmà không có thanh cuộn chỉ trong css không?
Ví dụ: màn hình của tôi có chiều rộng là 1920px. vwlợi nhuận 1920px, tuyệt vời. Nhưng chiều rộng cơ thể thực tế của tôi chỉ là một cái gì đó giống như 1903px.
Có cách nào để tôi truy xuất 1903pxgiá trị chỉ với css (không chỉ cho con trực tiếp của body) hay tôi thực sự cần JavaScript cho việc này?
width: calc(100vw - scrollbarWidth)nơi 'scrollbarWidth' là một số giá trị cố định như 15px
Câu trả lời:
Một cách để làm điều này là với calc. Theo như tôi biết, 100% là chiều rộng bao gồm cả thanh cuộn. Vì vậy, nếu bạn làm:
body {
width: calc(100vw - (100vw - 100%));
}
Bạn nhận được 100vw trừ đi chiều rộng của thanh cuộn.
Bạn cũng có thể làm điều này với chiều cao, nếu bạn muốn một hình vuông bằng 50% khung nhìn chẳng hạn (trừ 50% chiều rộng thanh trượt)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
bodyhoặc một phần tử có cùng chiều rộng body(nếu không 100%sẽ tham chiếu đến chiều rộng của phần tử sai). Trong trường hợp đó, bạn có thể chỉ cần sử dụng tỷ lệ phần trăm. Trừ khi tôi đang thiếu một cái gì đó?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% Tôi có bỏ lỡ điều gì không?
Tôi thực hiện việc này bằng cách thêm một dòng javascript để xác định một biến CSS sau khi tải xong tài liệu:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
thì trong CSS, bạn có thể sử dụng var(--scrollbar-width)để thực hiện bất kỳ điều chỉnh nào bạn cần cho các trình duyệt khác nhau có / không có thanh cuộn có độ rộng khác nhau. Bạn có thể làm điều gì đó tương tự cho thanh cuộn ngang, nếu cần, thay thế innerWidthbằng innerHeightvà clientWidthbằng clientHeight.
Theo thông số kỹ thuật , đơn vị độ dài tương đối của khung nhìn không tính đến thanh cuộn (và trên thực tế, giả sử rằng chúng không tồn tại).
Vì vậy, bất kể hành vi dự định của bạn là gì, bạn không thể tính đến các thanh cuộn khi sử dụng các đơn vị này.
vwtheo thông số kỹ thuật, không biết về sự tồn tại của bất kỳ thanh cuộn nào. Vì vậy, bạn không thể tính đến chúng.
overflow-y: scrollvs overflow-y: autodường như không thay đổi giá trị được tính toán cho đơn vị vw. Cụ thể, tôi có một cái gì đó được đặt trên trang web của mình thành 3,82vw và chiều rộng máy tính của tôi là 1920px. Với tính năng tự động tràn, 3.82vw = 73.344px, và sau đó tôi đã thử với cuộn tràn cũng đặt ra 73.344px, không thay đổi, khi nó thực sự sẽ đưa ra 72,6946px nếu bạn nói đúng
Các trình duyệt Webkit loại trừ các thanh cuộn, các thanh khác bao gồm chúng trong chiều rộng trả về. Tất nhiên, điều này có thể dẫn đến các vấn đề: ví dụ: nếu bạn có nội dung được tạo động bằng ajax có thêm chiều cao động, Safari có thể chuyển từ một bố cục sang một bố cục khác trong quá trình hiển thị trang ... Ok, nó không xảy ra thường xuyên, nhưng đó là điều cần nhận thức về. Trên thiết bị di động, ít vấn đề hơn, vì các thanh cuộn thường không được hiển thị.
Điều đó nói rằng, nếu vấn đề của bạn là tính toán chính xác chiều rộng khung nhìn mà không có thanh cuộn trong tất cả các trình duyệt, theo như tôi biết, một phương pháp tốt là:
width = $('body').innerWidth();
đã đặt trước đó:
body {
margin:0;
}
Thiết vwbị không tính đến overflow-ythanh cuộn khi overflow-yđược đặt thành auto.
Thay đổi nó thành overflow-y: scroll;và vwđơn vị sẽ là khung nhìn mà không có thanh cuộn.
Chỉ có nhược điểm cần tính đến. Nếu nội dung vừa với màn hình, thanh cuộn vẫn hiển thị. Giải pháp khả thi là thay đổi từ autosang scrolltrong javascript.
overflow-x?
overflow-y: scroll;
Cách duy nhất tôi thấy nó hoạt động mà không làm rối mã của bạn với "calc" là đặt kích thước phần tử vùng chứa thành 100vw; Thêm một trình bao bọc xung quanh vùng chứa cho tràn-x; Điều này sẽ làm cho vùng chứa có đầy đủ băng thông giống như nếu thanh cuộn ở trên nội dung.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>Nếu trường hợp tương tự như thanh trượt: Như đã đăng trong nhiều câu trả lời, chiều rộng 100% không tính đến thanh cuộn, trong khi 100vw thì có. Trong trường hợp có nhiều phần tử cần lấy chiều rộng của cửa sổ và được lồng vào bên trong một vùng chứa đã có 100% chiều rộng cửa sổ (hoặc có chiều rộng khối tự nhiên sẽ là như vậy), bạn có thể sử dụng:
trong trường hợp của tôi, tôi phải đặt div 100wh - 230px và tôi đã gặp phải vấn đề tương tự với chiều rộng cuộn bổ sung đó, những gì tôi đã làm là:
width: calc(100vw - (100vw - 100%) - 230px);
Đó không phải là giải pháp của tôi, nhưng giúp tôi tạo menu toàn dải thông thả xuống với phần tử tương đối tuyệt đối trong khoảng thời gian không đầy đủ.
Chúng ta sẽ lấy cuộn trong css var in: root và sau đó sử dụng nó.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }