Trang dài trong FireFox bù trừ khi thanh cuộn xuất hiện

Question

Trong Firefox và Safari, các trang được căn giữa di chuyển một vài pixel khi trang đủ dài để thanh cuộn xuất hiện. Nếu bạn điều hướng qua trang web có trang dài và ngắn, trang có vẻ "nhảy" xung quanh.

IE7 có xu hướng rời khỏi thanh cuộn hiển thị mọi lúc nhưng vô hiệu hóa khi trang không đủ dài. Vì chiều rộng của cửa sổ HTML không bao giờ thay đổi việc định tâm của trang không thay đổi.

Có cách giải quyết nào hay cách tạo kiểu trang để nó không nhảy xung quanh trong Firefox và Safari?

Cảm ơn.

Answer 1

Bạn chỉ có thể luôn luôn cho phép các thanh cuộn:

html{ 
overflow: scroll; 
} 

nhưng điều đó sẽ cung cấp cho bạn các thanh cuộn ngang quá, đây là tốt hơn:

html{ 
    overflow-y:scroll; 
    overflow-x:auto; 
} 

Điều đó sẽ cung cấp cho bạn chỉ có cuộn dọc và nằm ngang khi cần.

Answer 2

Trang web này chứa một javascript để sửa chữa vấn đề mà là một giải pháp tốt hơn IMO so với hiện tại (một thanh cuộn vĩnh viễn):

http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers

Kịch bản này chờ đợi cho đến khi DOM được nạp sau đó kiểm tra xem nếu một thanh cuộn đang hoạt động. Nếu có, nó sẽ tính chiều rộng của thanh cuộn và đặt marginLeft của cơ thể bằng với chiều rộng đó. Điều này bù đắp sự thay đổi, và kể từ khi nó chạy trên tải DOM nó có hiệu lực ngay lập tức.