body overflow:hidden не работает в Chrome

Alexander34 · September 7, 2014

Здравствуйте!

Возникли сложности со скроллом в webkit браузерах. Задача: необходимо что-бы по клику на div страница замирала в текущем положении и не возможно было прокручивать с помощью колёсика мыши.

Вот небольшой макет.

<!doctype html><html><head><meta charset="UTF-8"><title>Overflow: hidden</title><style>	.box {		width: 498px;		height: 298px;		border: 1px solid #000;		margin: 5px auto;		text-align: center;	}	.text {		font-size: 150px;		font-family: sans-serif;		font-weight: bold;	}</style></head><body>	<div class="box"><span class="text">1</span></div>	<div class="box"><span class="text">2</span></div>	<div class="box"><span class="text">3</span></div>	<div class="box"><span class="text">4</span></div>	<div class="box"><span class="text">5</span></div>	<script>		var boxes = document.getElementsByClassName("box");		for(var i=0; i<boxes.length; i++) {			boxes[i].onclick = function() {				document.body.style.overflow = "hidden";			}		}	</script></body></html>

Если кликнуть по div, то скрипт применить стиль к body:

document.body.style.overflow = "hidden";

В chrome скролл исчезает, но страница по-прежнему прокручивается. В FF и IE11 все прекрасно работает. Пробовал через консоль вводить overflow: hidden; , а также в теге style описывал это. Но ничего не помогло.

Есть пример http://learn.javascript.ru/metrics-window#запрет-прокрутки . Всё прекрасно работает. Есть предложения ? Спасибо!!!

Arthur · September 7, 2014

var boxes = document.getElementsByClassName("box");

for(var i=0; i<boxes.length; i++) {

boxes.onclick = function() {

document.body.style.overflow = "hidden";

document.onmousewheel = function (e) {

e.preventDefault();

}

</script>

Edited September 7, 2014 by Arthur

moron · September 7, 2014

Забавно. Если поставить в обработчик только:

document.body.parentNode.style.overflow = "hidden"; // parent = html

то хром вырубит прокрутку, ff ее оставит.

Edited September 7, 2014 by moron

zenw · September 7, 2014

У меня, видимо, какой-то неправильный хром: все работает, ничего ничем не прокручивается, ни мышкой, ни клавиатурой. Вот.

http://codepen.io/anon/pen/nqlru

Что я делаю не так?

Edited September 7, 2014 by zenw

Arthur · September 7, 2014

On 9/7/2014 at 5:38 PM, zenw said:
У меня, видимо, какой-то неправильный хром: все работает, ничего ничем не прокручивается, ни мышкой, ни клавиатурой. Вот.
http://codepen.io/anon/pen/nqlru
Что я делаю не так?

в html файл поместите код и откройте в хроме.

Bassline · September 7, 2014

Может этот вариант подойдет http://learn.javascript.ru/task/zapretite-prokrutku-stranicy ?

Alexander34 · September 8, 2014

Всем спасибо! Со скриптами вариант верный оказался, все прекрасно работает!

On 9/7/2014 at 3:23 PM, Arthur said:
document.onmousewheel = function (e) { e.preventDefault();}

Хороший пример, остается только добавить код для ie<9(если нужно).

//IE<9: event.returnValue=false;//или жеreturn false;

rus · September 8, 2014

вообще: getElementsByClassName - не кросс вариант, лучше getElementById.

Sign In

body overflow:hidden не работает в Chrome

Question

Alexander34

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Arthur

Link to comment

Share on other sites

moron

Link to comment

Share on other sites

zenw

Link to comment

Share on other sites

Arthur

Link to comment

Share on other sites

Bassline

Link to comment

Share on other sites

Alexander34

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information