Làm thế nào để bù cho thanh cuộn dọc khi nó chưa có mặt

Question

Có lẽ đây là một sửa chữa dễ dàng, nhưng nó đã khiến tôi phát điên trong một thời gian dài vì vậy cuối cùng tôi đã quyết định xem liệu có tồn tại một giải pháp hay không.

Nói một cách đơn giản, tôi tập trung hầu hết các trang web của mình trong các cổng xem rộng.

Ví dụ, cổng xem có thể có kích thước 1028px và tôi muốn chiều rộng của trang của tôi chỉ là 960px.

Vì vậy, css của tôi trông như thế này:

#pageWrapper { /* page width is 960 pixels */ 
    margin:0 auto; 
    width:960px; 
} 

Không có vấn đề với điều đó.

Sự cố xảy ra khi tôi bắt đầu trang động ngắn hơn chiều cao của trang và sau đó trang của tôi mở rộng (thông qua jQuery slideOut, v.v.) ở dưới cùng của màn hình và làm cho thanh cuộn dọc xuất hiện.

Nó kết thúc làm cho trang nhấp nháy trái trong slideOut và sau đó nhấp nháy ngay trong slideIn.

Có cách nào thông qua css để buộc lề phải 20px và vẫn tận dụng lợi thế của margin:0 auto;?

Cảm ơn.

Answer 1

Khi nội dung của trang không còn phù hợp theo chiều dọc, trình duyệt sẽ thêm thanh cuộn vào bên phải của cửa sổ. Điều này thay đổi chiều rộng có sẵn trong cửa sổ trình duyệt, vì vậy bất kỳ nội dung nào là trung tâm hoặc vị trí tương đối với phía bên phải của cửa sổ sẽ di chuyển sang trái một chút. Điều này rất phổ biến.

Có một số cách để kiểm soát điều này, nhưng phổ biến nhất là làm cho nó để bạn luôn có thanh cuộn hoặc không bao giờ có thanh cuộn bằng cách kiểm soát thuộc tính overflow-y trên cửa sổ.

Đặt overflow-y: scroll sẽ buộc các thanh cuộn luôn ở đó.

Đặt overflow-y: hidden sẽ buộc ở đó để không bao giờ là thanh cuộn.

Answer 2

NB: overflow-y: hidden ngăn người dùng cuộn xuống bằng bất kỳ phương tiện nào, hiển thị có hiệu quả bất kỳ nội dung nào bên dưới chế độ xem thấp hơn không thể truy cập được.