Как запретить пользователям прокручивать по горизонтали на моем сайте

Здесь сайт: http://joshnh.com/

В принципе, у меня есть несколько элементов, которые очень широкие, так что они выглядят так, как будто они выходят с правой стороны экрана. Затем я использую overflow-x: hidden; на теле, чтобы скрыть переполнение, но это не останавливает страницу из горизонтальной прокрутки, когда пользователи используют свой трекпад, или нажмите и перетащите указатель мыши вправо.

Сайт является текучим, поэтому настройка overflow-x: hidden; не является проблемой, но она должна быть установлена в тегах body/html, а не на обертке содержимого, поскольку это разрушит дизайн.

Я также использую этот фрагмент jQuery, чтобы попытаться помочь:

(function($) {
    $(window).scroll( function() {
        $(window).scrollLeft(0);
    });
})(jQuery);

Я успешно использовал это в прошлом, но я не могу заставить его работать в этом случае. Вот jsFiddle, показывающий вышеприведенный фрагмент, работающий в уменьшенном тестовом примере: http://jsfiddle.net/joshnh/pqpzN/

Любые предложения?

P.S. Он работает так же, как и на iOS.

UPDATE: Я думаю, что мне удалось получить этот фрагмент jQuery, чтобы остановить горизонтальную прокрутку через сенсорные панели, но нажатие и перетаскивание по-прежнему работает (что я не могу объяснить, так как тестовый сценарий перестает щелкнуть и перетаскивать тоже, как и должно быть делая на моем сайте).

Ответы

Ответ 1

Я исправил проблему, изменив это:

body,
html {
    overflow-x: hidden;
    width: 100%;
}

Для этого:

html {
    overflow-x: hidden;
    width: 100%;
}

Это был overflow-x: hidden; в элементе body, который вызывал проблему.

Ответ 2

Похоже, он работает со мной. (Независимо от того, что я сделал на странице, я не видел горизонтальную полосу прокрутки.) Я думаю, что overflow-x - правильное решение, и для этого вам не нужен JavaScript. Я бы использовал html { overflow-x:hidden }, но похоже, что вы уже это делаете. Первое, что я хотел бы сделать, - проверить страницу на html5.validator.nu и исправить ошибки "двух последовательных дефисов".

Ответ 3

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

ваши <header class="clearfix" role="banner"> и <h1 class="section-title">About Me</h1> кажутся виновными. Ограничение их ширины с помощью css должно решить проблему.

Ответ 4

Предложение 1

Примените максимальную ширину к body. Что-то вроде этого:

body
{
    max-width:   100%;
    margin:    0 auto;
    overflow: visible;
}

Я тестировал Chrome и IE9, и единственная проблема, которую я заметил, - это прыжки.

Ответ 5

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

body,
html {
    overflow-x: hidden;
    width: 100%;
}

Когда я попытался:

html {
    overflow-x: hidden;
    width: 100%;
}

это не сработало.