Trình duyệt Scrollbar shift

Khi bạn truy cập trang trên trang web của tôi, nơi có thêm nội dung, thanh cuộn xuất hiện ở bên phải, nhưng nó có một sự thay đổi đáng chú ý ở bên trái nội dung của tôi. Bạn nhận thấy điều này bằng cách bấm vào nhà và sau đó lưu trữ và trở lại một lần nữa trên trang web của tôi (www.ipalaces.org)Trình duyệt Scrollbar shift

Làm cách nào tôi có thể chiếm thanh cuộn của trình duyệt trên các trang của mình? Tôi có thể làm cho thanh cuộn luôn hiển thị ít nhất không?

Trang web của tôi là www.ipalaces.org, vui lòng cho tôi biết.

Nguồn

2009-07-29 ParoX

Đối với những người cố gắng tái sản xuất, bạn có thể cần phải làm cho cửa sổ của bạn có kích thước nhỏ hơn. – waiwai933

Hoạt động tốt cho tôi trong IE8. Chúng ta đang nói về trình duyệt nào? – Joey

Tất cả các trình duyệt, tôi đang sử dụng 1360 x 768 res, 720P trên HDTV của tôi, vì vậy có lẽ độ phân giải của bạn cao hơn cho phép bạn xem toàn bộ nội dung, nếu đó là trường hợp thử truy cập tại đây http://www.ipalaces.org/hosting/ domains.html và sau đó nhấp vào nhà để thông báo sự khác biệt. – ParoX

Làm cho cơ thể bạn cao 101% ... điều này sẽ buộc thanh cuộn luôn hiển thị.

body {height:101%}

Nguồn

2009-07-29 23:59:16

Điều đó hoạt động tốt, nhưng sau đó có sự dịch chuyển xuống 1 điểm ảnh gây phiền nhiễu. Không có cách nào để làm cho tất cả các trình duyệt hiển thị thanh cuộn nhưng bị vô hiệu hóa nếu không cần thiết. Giống như -moz-scrollbars-vertical; nhưng phổ biến hơn – ParoX

html, body {height: 100%; margin-bottom: 1px;} Dường như đã giảm bớt khoảng cách, nhưng vẫn còn một khoảng cách gây phiền nhiễu. – ParoX

Vâng, tùy thuộc vào trình duyệt.

body { 

overflow-y: scroll; 
overflow-x: scroll; 
overflow: -moz-scrollbars-vertical; 

}

nên buộc (overflow-x) và thanh cuộn dọc ngang (overflow-y) sẽ được hiển thị. Mặc dù tôi nhớ lại rằng đôi khi Opera không tôn trọng tuyên bố, trừ khi nó nằm trên một phần tử trong số <body> (divs và tương tự).

Sửa liên quan đến @ wsanville với, và @ BHare của, nhận xét.

Nguồn

2009-07-29 22:46:17

Điều này để lại một thanh cuộn gấp đôi xấu xí khi cần. – ParoX

Xác định 'thanh cuộn kép'. Hai thanh cuộn với nhau trên mỗi trục? –

Bạn không nên áp dụng các thuộc tính tràn cho cả 'html' và' body' nếu không bạn sẽ có hai thanh cuộn! Kinh quá! – wsanville

Hãy thử tính năng này ... Tôi biết nó xấu xí nhưng nó có thể là cách duy nhất.

#force_scroll { 
    width: 1em; 
    position: absolute; 
    top: 0; 
    bottom: -0.1px; 
    z-index: -1; 
}

Và rồi trong HTML của bạn ở đâu đó (tốt nhất là ngay trước </body> của bạn):

<div id="force_scroll"></div>

Nguồn

2009-07-30 20:11:06

Trước cái gì? Điều này cũng không hoạt động. – ParoX

-0.1px không phải là thước đo hợp lệ. Mặc dù vậy, sử dụng -1px hoặc -0.1em vẫn để lại hiệu ứng tương tự như margin-bottom: 1px; Trang vẫn có thể cuộn xuống 1 pixel. – ParoX

@Brian, xem bản chỉnh sửa. Ban đầu, ' 'không được thoát/đánh dấu là mã. Vì vậy, nó không được hiển thị trên trang. Tôi nhận ra nó có thể là quá muộn để được hữu ích mặc dù. –

body { 
    overflow: scroll; 
}

tôi đã cùng một vấn đề với ngay cả những Firefox mới nhất (3.5). Chức năng tràn đã cứu mạng tôi!

Nguồn

2009-10-03 09:38:06

Tôi đã thử nghiệm này trên IE6, IE7, IE8, Firefox 3, và Chrome, và cách đơn giản để có một thanh cuộn dọc luôn có thể nhìn thấy chỉ đơn giản là:

html { overflow-y: scroll; }

Nguồn

2010-09-09 14:15:56 wsanville

Điều này dường như ít hackish sau đó trả lời được trao. http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/ –

Điều này dường như làm việc tuyệt vời cho tôi ...

html { 
    overflow-y: scroll; 
}

Nguồn

2012-09-02 18:25:55 EdenMachine

Trình duyệt Scrollbar shift

Trả lời

Các vấn đề liên quan