1

Нужно отключить прокрутку страницы при нажатии на кнопку. При повторном нажатии на эту же кнопку, прокрутка должна снова включаться.

Я делаю это через overflow: hidden; для body/html и этот трюк работает везде (все браузеры на PC, телефоны на android), кроме iphone.

Для iphone получается только когда overflow: hidden; применено и к body, и к html, но тогда при включении прокрутки она начинается с начала страницы, а не с того места, где ее выключили.

Подскажите, пожалуйста, какой-нибудь нехитрый и не ресурсоемкий трюк для этого.

Для наглядности или кодпен - http://codepen.io/anon/pen/adLVar

$('#div_menu').click(
function() {
  $('body').toggleClass('hide_page');
});   
body, html {
  margin: 0;
  padding: 0;
}

#div_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #000000;
}

#div0 {
  height: 2000px;
  width: 100%;
}

.hide_page {
overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_menu">
  </div>
<div id="div0">
  <br>
<br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>x3</p>
</div>

Большое спасибо отозвавшимся!

2 ответа 2

1

Код из ответа работать не будет. Допилил идею, кому интересно, итог ниже. Главная проблема, что при блокировке скролла экран будет уезжать.

var scrollTop = 0;
var newscroll = 0;
$('#div_menu').click(function() {
  scrollTop = window.scrollY;
  $html = $('html');
  if($html.hasClass('hide_page')){
    } else {newscroll = scrollTop;
           };
  $html.toggleClass('hide_page');
  if($html.hasClass('hide_page')){
    } else {
    window.scrollTo(0, newscroll);
  };
});  
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

html.hide_page body {
  overflow: hidden;
}

#div_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #000000;
}

#div0 {
  height: 2000px;
  width: 100%;
}

.hide_page {
overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_menu">
  </div>
<div id="div0">
  <br>
<br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>x3</p>
</div>

1
  • И еще одна проблема в том, что при команде window.scrollTo(0, newscroll); скроллися без учета адресной строки. Т.е. верх браузера прокручивается. Кто знает, как исправить?
    –  enki
    16 янв 2016 в 15:21
0

Вам может помочь простое сохранение значения скрола на момент открытия окна и восстановления его значения на момент закрытия окна, пример в коде.

var scrollTop = 0;
$('#div_menu').click(function(event) {
  scrollTop = window.scrollY;
  $('body').toggleClass('hide_page');
  if($('body').hasClass('hide_page')){
    window.scrollTo(0, scrollTop);
  };
});   
body, html {
  margin: 0;
  padding: 0;
}

#div_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #000000;
}

#div0 {
  height: 2000px;
  width: 100%;
}

.hide_page {
overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_menu">
  </div>
<div id="div0">
  <br>
<br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>x3</p>
</div>

1
  • Спасибо за подсказку, ниже опробовал ее. Появляется проблема, что экран "уезжает" при блокировке скролла.
    –  enki
    16 янв 2016 в 15:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.