Căn giữa trang một trang theo chiều ngang cuộn trong trình duyệt (không định tâm một div)

Question

Khi trình duyệt mở trang của tôi, trình duyệt phải ở giữa trang.

Ý nghĩa: Tôi có một trang ngang, thay vì bắt đầu từ bên trái và sang phải (ví dụ: this), sẽ bắt đầu ở giữa và có thể cuộn đến nội dung ở cả bên phải VÀ Bên trái.

Đây là một hình ảnh:

Nếu có thể, tôi muốn tránh di chuyển dom-ready qua JavaScript hoặc jQuery (Tôi đang sử dụng nó cho viện trợ hàng hải và các công cụ anyways), và chỉ sử dụng html5/css thuần túy hoặc ít nhất là tập trung vào màn hình sẵn sàng sẵn sàng thông qua JavaScript/jQuery.

Hai ý tưởng về phía tôi:

a) di chuyển vùng chứa sang bên trái, ví dụ: sử dụng margin-left:-x, nhưng thường cắt nó đi.

b) di chuyển màn hình sang phải từ đầu.

Than ôi, tôi đã quá không mong muốn đạt được điều này một mình.

p.s. ở đây jsfiddle của tôi cho sự nhất quán: http://jsfiddle.net/alexdot/2Dse3/

Answer 1

Giải pháp
Nếu bạn muốn ẩn dữ liệu, thêm visibility:hidden; đến các yếu tố có hàm lượng mà nên được giữ ẩn lúc bắt đầu. Thực thi mã cuộn trang của tôi và cuối cùng thay đổi visibility:hidden; thành visibility:visible.

Điều gì sẽ xảy ra?

1. CSS ẩn nội dung của các yếu tố: visibility:hidden
2. Trang tải
gây
3. JavaScript trang để di chuyển đến trung tâm: window.scrollTo(..., ...)
4. JavaScript cho thấy nội dung bí mật (bên ngoài giao diện của trình duyệt): visibility=visible
5. các người dùng cuộn sang trái/phải, và có khả năng đọc các bí mật

Fiddle: http://jsfiddle.net/2Dse3/5/

---

cuộn đang
cuộn trang để trung tâm không thể đạt được với CSS tinh khiết/HTML. Điều này chỉ có thể được thực hiện bằng cách sử dụng JavaScript. Với mục đích đơn giản này, tôi thích sử dụng JavaScript nguyên gốc hơn là bao gồm một plugin JQuery (tải máy chủ không cần thiết).

mã JavaScript:

window.scrollTo(
    (document.body.offsetWidth -document.documentElement.offsetWidth)/2, 
    (document.body.offsetHeight-document.documentElement.offsetHeight)/2 
); 
/* 
* window.scrollTo(x,y) is an efficient cross-broser function, 
* which scrolls the document to position X, Y 
* document.body.offsetWidth contains the value of the body's width 
* document.documentElement contains the value of the document's width 
* 
* Logic: If you want to center the page, you have to substract 
* the body's width from the document's width, then divide it 
* by 2. 
*/ 

Bạn phải điều chỉnh CSS (xem Fiddle):

body {width: 500%} 
#viewContainer {width: 100%} 

Một lưu ý cuối cùng. Bạn mong đợi điều gì khi người dùng đã tắt JavaScript? Họ có được phép xem nội dung của trang không? Nếu có, hãy thêm điều này:

<noscript> 
    <style> 
    .page{ 
     visibility: visible; 
    } 
    </style> 
</noscript> 

Nếu không, hãy thêm <noscript>JavaScript is required to read this page</noscript>.

Answer 2

Có gì sai với DOM sẵn sàng?

$(function() { 
    $('body').scrollLeft($('#viewContainer').width() * 2/5); 
}); 

I'm pretty sure it can't be done with CSS alone.

Answer 3

Một giải pháp jQuery dễ

$(function() { 
    scrollTo(($(document).width() - $(window).width())/2, 0); 
});