Почему страница перемещается вверх с контейнером с переполнением: скрытый?

Question

Я столкнулся с проблемой, которая действительно странная. Это в каждом браузере.

Все работает правильно, пока вы не попытаетесь перейти к разделу с использованием хэша (как #contactUs на моей странице) ... попробуйте этот URL: http://mahersalam.co.cc/projects/2011/#contactUs

Вы увидите, что страница перемещается на 10 пикселей вверх. если вы удалите хеш, он снова заработает.

У меня есть обертка на странице (#container) с переполнением: скрыто, я сделал это, чтобы убедиться, что полосы прокрутки не появляются при изменении разрешения. Если вы удалите свойство переполнения, оно тоже будет работать.

Полагаю, что смещение происходит через место полосы прокрутки, но поскольку оно скрыто, оно остается только.

Так кто-нибудь знает, как решить эту проблему?

Редактировать:

Я нашел решение и записал его в anwsers.

Answer 1

Я считаю, что проблема в том, что идентификатор фрагмента заставляет контейнер прокручиваться перед прокруткой страницы. После завершения страницы элемент контейнера имеет значение scrollTop «16».

Вот что я сделал в greasemonkey в Firefox, чтобы восстановить недостающую область.

window.addEventListener('scroll', 
  function(e)
  { 
    var cont = document.getElementById("container");
    if ( cont.scrollTop > 0) cont.scrollTop = 0; 
  }, 
  false );

Что это, когда вы прокручиваете обратно наверх, отображается недостающее пространство.

Как решение, оно мне совсем не нравится, но оно показывает, в чем заключается ваша проблема, и, возможно, другие могут подумать о более чистом способе установки scrollTop контейнера в 0.

Answer 2

Это, безусловно, эстетически приятный макет.Очень хорошо.

В любом случае, переполнение, кажется, берет кусок из верхнего поля #headerWrap и добавляет его в нижнюю часть страницы для меня, это ровно 16 пикселей.

Ничего из того, что я пробовал, пока не работает.Можете ли вы получить его так, чтобы #container не переполнялось по горизонтали?

---

Редактировать: Не берите в голову;следующее не работает ...
Изменение стиля #container с overflow: hidden; на overflow-y: hidden; кажется для работы в Firefox не очень надежное решение.

Answer 3

Решением было удаление height:100% из .rightCol и .leftCol.

Я предполагаю, что эти разделы были переполнены из-за свойства высоты.