Ngăn thanh cuộn thêm vào Chiều rộng của trang trên Chrome

Tôi gặp một vấn đề nhỏ khi cố gắng giữ cho các trang .html của mình có chiều rộng nhất quán trên Chrome, Ví dụ: tôi có một trang (1) có nhiều nội dung vượt quá chiều cao của khung nhìn (từ phải không?), Vì vậy có một thanh cuộn dọc trên trang đó (1). Ở trang (2), tôi có cùng một bố cục (menu, div, ... vv) nhưng ít nội dung hơn, vì vậy không có thanh cuộn dọc ở đó.

Vấn đề là trên trang (1) các thanh cuộn dường như hơi đẩy các phần tử sang trái (tăng thêm chiều rộng?) Trong khi mọi thứ xuất hiện đều ở giữa trang (2)

Tôi vẫn là người mới bắt đầu về HTML / CSS / JS và tôi khá tin rằng điều này không quá khó, nhưng tôi không may mắn tìm ra giải pháp. Nó hoạt động như dự định trên IE10 và FireFox (thanh cuộn không gây nhiễu), tôi chỉ gặp điều này trên Chrome.

Bạn có thể lấy kích thước thanh cuộn và sau đó áp dụng lề cho vùng chứa.

Một cái gì đó như thế này:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS để loại bỏ thanh cuộn h:

body{
    overflow-x:hidden;
}

Hãy thử xem phần này: http://jsfiddle.net/NQAzt/

TUYÊN BỐ TỪ CHỐI : lớp phủ không được dùng nữa .
Bạn vẫn có thể sử dụng điều này nếu bạn hoàn toàn phải làm như vậy, nhưng hãy cố gắng không.

Điều này chỉ hoạt động trên trình duyệt WebKit , nhưng tôi rất thích nó. Sẽ hoạt động như autotrên các trình duyệt khác.

.yourContent{
   overflow-y: overlay;
}

Điều này sẽ làm cho thanh cuộn chỉ xuất hiện dưới dạng lớp phủ , do đó không ảnh hưởng đến chiều rộng của phần tử của bạn!

Tất cả những gì bạn cần làm là thêm:

html {
    overflow-y: scroll;
}

Trong tệp css của bạn vì nó sẽ có cuộn cho dù nó có cần thiết hay không mặc dù bạn sẽ không thể cuộn

Điều này có nghĩa là khung nhìn sẽ có cùng chiều rộng cho cả hai

Có lẽ

html {
    width: 100vw;
}

chỉ là những gì bạn muốn.

Các trình duyệt Webkit như Safari và Chrome trừ chiều rộng thanh cuộn cho chiều rộng trang hiển thị khi tính chiều rộng: 100% hoặc 100vw. Thông tin thêm tại DM Rutherford's Scrolling and Page Width .

Hãy thử sử dụng overflow-y: overlaythay thế.

Tôi thấy tôi có thể thêm

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

trực tiếp đến css của tôi và nó sẽ làm cho thanh cuộn vô hình, nhưng vẫn cho phép tôi cuộn (ít nhất là trên Chrome). Phù hợp khi bạn không muốn có một thanh cuộn gây mất tập trung trên trang của mình!

Đối với các vùng chứa có chiều rộng cố định, giải pháp trình duyệt chéo CSS thuần túy có thể được thực hiện bằng cách gói vùng chứa vào một div khác và áp dụng cùng một chiều rộng cho cả hai div.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Nhấp vào đây để xem ví dụ về Codepen

Có vẻ như câu trả lời khác của tôi không hoạt động tốt vào lúc này (nhưng tôi sẽ tiếp tục cố gắng để nó hoạt động).

Nhưng về cơ bản những gì bạn cần làm và những gì nó đang cố gắng thực hiện động, là đặt chiều rộng của nội dung nhỏ hơn một chút so với chiều rộng của ngăn chính, có thể cuộn.
Vì vậy, khi thanh cuộn xuất hiện, nó không ảnh hưởng đến nội dung.

VÍ DỤ này cho thấy một cách khó khăn hơn để đạt được mục tiêu đó, bằng cách mã hóa cứng widththay vì cố gắng yêu cầu trình duyệt thực hiện điều đó cho chúng ta padding.
Nếu điều này là khả thi thì đây là giải pháp đơn giản nhất nếu bạn không muốn có một thanh cuộn vĩnh viễn.

_{CHỈNH SỬA: câu trả lời này không hoàn toàn đúng vào lúc này, hãy tham khảo câu trả lời khác của tôi để xem tôi đã cố gắng làm gì ở đây. Tôi đang cố gắng sửa nó, nhưng nếu bạn có thể cung cấp hỗ trợ, hãy làm như vậy trong phần nhận xét, cảm ơn!}

Việc sử dụng padding-rightsẽ giảm thiểu sự xuất hiện đột ngột của thanh cuộn

THÍ DỤ

Như bạn có thể thấy từ các dấu chấm, văn bản sẽ đến cùng một điểm trong trang trước khi gói lại, bất kể có thanh cuộn hay không.
Điều này là do khi thanh cuộn được giới thiệu, phần đệm ẩn đằng sau nó, vì vậy thanh cuộn không đẩy lên văn bản!

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

trong đó 300 px là một nửa chiều rộng cửa sổ hộp thoại của tôi.

Đây thực sự là điều duy nhất làm việc cho tôi.

Tôi gặp sự cố tương tự trên Chrome. Nó chỉ xảy ra với tôi khi thanh cuộn luôn hiển thị. (tìm thấy trong cài đặt chung) Tôi có một phương thức và khi mở phương thức, tôi nhận thấy rằng ...

body {
    padding-left: 15px;
}

được thêm vào cơ thể. Để ngăn điều này xảy ra, tôi đã thêm

body {
    padding-left: 0px !important;
}

Tôi không thể thêm nhận xét cho câu trả lời đầu tiên và đã lâu ... nhưng bản demo đó có vấn đề:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') luôn bằng b.height (),

Tôi nghĩ nó phải như thế này:

if(b.prop('scrollHeight')>window.innerHeight) ...

Cuối cùng, tôi đề xuất một phương pháp:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}