Отключить горизонтальную прокрутку; но разрешить вертикальную прокрутку

Я пытаюсь отключить горизонтальную прокрутку на веб-сайте; , но разрешая вертикальную прокрутку.

У меня есть script, который работает как слайдер, сдвигая "тело" страницы слева и раскрывая больше содержимого. Однако это создает лишнее пустое пространство справа.

Мне нужно отключить горизонтальную прокрутку, чтобы пользователи не увидели это пустое пространство. Я попробовал следующий script, но он отключает горизонтальную и вертикальную прокрутку:

window.onscroll = function () {
     window.scrollTo(0,0);
}

Я пробовал overflow-x: hidden, но это не работает, когда ширина тела динамическая, а не статическая.

Вопрос:

Есть ли способ изменить приведенный выше script, чтобы отключить горизонтальную прокрутку и сохранить вертикальную прокрутку?

Ответы

Ответ 1

Ты был близок к этому. Вам нужно получить document -or window - и привязать прокрутку: тогда вы можете проверить, обновлен ли scrollLeft до больше 0, и установите scrollLeft на 0.

Следующий код работает хорошо:

$(function() {

    var $body = $(document);
    $body.bind('scroll', function() {
        // "Disable" the horizontal scroll.
        if ($body.scrollLeft() !== 0) {
            $body.scrollLeft(0);
        }
    });

});

Если вы хотите отключить горизонтальную прокрутку для элемента (например, div), вам нужно заменить $(document) на $("#yourElementID")

JSFiddle: https://jsfiddle.net/tomloprod/zx1bvdf5/

Примечание:

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

И будет, как если бы не было горизонтальной прокрутки.

Ответ 2

Это должно работать (CSS):

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

Ответ 3

использовать overflow-x: скрытый на вашем элементе-оболочке

overflow-x:hidden;

Ответ 4

Без JQuery:

window.onscroll = function () {
  window.scrollLeft = 0;
}

Ответ 5

Вы также можете использовать jQuery "on" и проверить дельтаX.

$("body").on("wheel", function(e) {
  var deltaX = e.originalEvent.deltaX;

  if (deltaX !== 100 && deltaX !== -100) {
    ...do something
  }

  return false;
});

Ответ 6

CSS:

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden auto;
}

100vw/vh означает 100% ширины/высоты порта просмотра (= внутренности окна).

hidden auto означает, что никогда не показывать прокрутку по x и показывать прокрутку по y, когда это необходимо.

Ответ 7

Вот что я сделал, чтобы решить мою проблему.

 window.onscroll = function () {
     window.scrollTo(0,window.scrollY);
 };