Подтвердить что ты не робот

Центрируйте одностраничный горизонтальный прокручиваемый сайт в браузере (не центрируя div)

Когда браузер открывает мою страницу, браузер должен быть уже в центре всей страницы.

Значение: у меня горизонтальная одна страница, которая вместо начала слева и справа направо (например, this), будет начните посередине и сможете прокручивать содержимое как справа, так и слева.

Вот визуально:

enter image description here

Если возможно, я бы хотел избежать прокрутки дома с помощью JavaScript или jQuery (я использую его для навигационной помощи и т.д.) и использовать только чистый html5/css или, по крайней мере, фокусировать экран pre-dom уже через JavaScript/jQuery.

Две идеи с моей стороны:

a) перемещение контейнера влево, например. используя margin-left:-x, но это обычно отключает его.

b) перемещение экрана вправо с самого начала.

Увы, я слишком сомневаюсь в достижении этого самостоятельно.

p.s. здесь моя jsfiddle для последовательности: http://jsfiddle.net/alexdot/2Dse3/

4b9b3361

ОТВЕТЫ

Ответ 1

Решение
Если вы хотите скрыть данные, добавьте visibility:hidden; к элементам с содержимым, которое должно быть скрыто в начале. Выполните код прокрутки страницы и, наконец, измените visibility:hidden; на visibility:visible.

Что произойдет?

  • CSS скрывает содержимое этих элементов: visibility:hidden
  • Загрузка страницы
  • JavaScript заставляет страницу прокручиваться до центра: window.scrollTo(..., ...)
  • JavaScript показывает секретный контент (вне представления браузера): visibility=visible
  • Пользователь прокручивает влево/вправо и может читать секретный

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

Прокрутка кода
Прокрутка страницы до центра не может быть достигнута с помощью чистого CSS/HTML. Это можно сделать только с помощью JavaScript. Для этой простой цели я предпочел бы использовать родной JavaScript, чем включать плагин JQuery (ненужная загрузка сервера).

Код 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 width
 * document.documentElement contains the value of the document width
 *
 * Logic: If you want to center the page, you have to substract
 * the body width from the document width, then divide it
 * by 2.
 */

Вам нужно настроить CSS (см. Fiddle):

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

Последняя заметка. Что вы ожидаете, когда пользователь отключил JavaScript? Разрешено ли им просматривать содержимое страницы? Если да, добавьте это:

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

В противном случае добавьте <noscript>JavaScript is required to read this page</noscript>.

Ответ 2

Простое решение jQuery

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