Тело настроено на переполнение-y: скрыто, но страница по-прежнему прокручивается в Chrome

У меня возникла проблема с свойством overflow-y в Chrome. Даже если я установил его в hidden, я все еще могу прокрутить страницу с помощью колеса мыши.

Вот мой код:

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}

<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>

Ответ 1

Наконец-то я нашел способ исправить проблему, поэтому я отвечаю здесь.

Я установил overflow-y в #content вместо этого и завернул мои шаги в другой div. Оно работает.

Вот окончательный код:

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}

Ответ 2

Настройка высоты вашего тела и html 100% должна исправить вас. Без определенной высоты ваш контент не переполняется, поэтому вы не получите желаемого поведения.

html, body {
  overflow-y:hidden;
  height:100%;
}

Ответ 3

Что работает для меня в /FF и/Chrome:

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hidden просто отключает отображение полос прокрутки. (Но вы можете поместить его туда, если хотите).

Есть один недостаток, который я нашел: если вы используете этот метод на странице, которую вы хотите временно приостановить, установка position: fixed будет прокручивать ее вверх. Это связано с тем, что позиция: фиксированная использует абсолютные позиции, которые в настоящее время установлены на 0/0.

Это можно отремонтировать, например. с jQuery:

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}

Ответ 4

Другим решением, которое я нашел для работы, является установка обработчика mousewheel на внутреннем контейнере и убедитесь, что он не распространяется, установив свой последний параметр в false и остановив пузырь событий.

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

Scroll отлично работает во внутреннем контейнере, но событие не распространяется на тело и поэтому не прокручивается. Это дополнительно к настройке переполнения свойств тела: скрытый и высота: 100%.

Ответ 5

Использование:

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;

Ответ 6

Найдите элемент, который больше, чем тело (элемент, который заставляет страницу прокручиваться), и просто установите его положение фиксированным. ПРИМЕЧАНИЕ: я не говорю об изменении положения перетаскиваемых элементов. Перетаскиваемые элементы можно перетаскивать из тела только в том случае, если имеется элемент больше, чем тело (в основном по ширине).

Ответ 7

Попробуйте это, если вы хотите "исправить" прокрутку своего тела:

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

и это, если вы хотите снова включить его:

jQuery('body').css('height', '').css('overflow-y', '');

Ответ 8

Итак, это комбинация, которая работала для меня, когда у меня была эта проблема на одном из моих сайтов:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}

Ответ 9

Технически размер ваших body и html шире экрана, поэтому у вас будет прокрутка. Вам нужно будет установить margin:0; и padding:0;, чтобы избежать поведения прокрутки, и вместо этого добавьте некоторый отступ/дополнение к #content.

Ответ 10

Правильный ответ: вам нужно настроить JUST body на переполнение: hidden. По какой-то причине, если вы также установите html для переполнения: скрытый результат - это проблема, которую вы описали.