it-swarm.com.ru

Тело установлено в overflow-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>

Кто-нибудь знает, как заблокировать вертикальную прокрутку в Chrome?

Спасибо!

21
Cécile Boucheron

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

Вместо этого я установил 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;
}
17
Cécile Boucheron

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

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

Что у меня работает на/FF и/Chrome:

body {

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

}

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

Я обнаружил один недостаток: если вы используете этот метод на странице, которую вы хотите только временно прекратить прокручивать, установка position: fixed будет прокручивать его до самого верха . Это потому, что 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 );       
}                                         
11
Scheintod

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

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

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

3
dareapersven

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

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

Попробуйте это, когда хотите «починить» свиток вашего тела:

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

и это, когда вы хотите, чтобы это снова стало нормальным:

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

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

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}
0
Milan Meuleman

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

0
Vikas Bidhuri