1

Добрый день! Подскажите, пожалуйста, каким образом можно реализовать прокрутку страницы до определенного места, а дальнейшую прокрутку только при нажатии на кнопку? При этом размер сколлбара меняться не должен. Именно дошел до определенного блока и по скроллу видно, что можно еще крутить, но при прокрутке страница дальше не двигается. Спасибо!

.cover {
  position: relative;
  height: 1000px;
  background: chocolate;
}

.header {
  position: relative;
  height: 1000px;
  background: antiquewhite;
}

.footer {
  position: relative;
  height: 2000px;
  background: burlywood;
}

button {
  position: absolute;
  bottom: 10px;
  right: 0;
  left: 0;
  width: 100px;
  margin: 0 auto;
}
<div class="cover"></div>
<div class="header"><button>Дальше</button></div>
<div class="footer"></div>

1 ответ 1

2

var footTop = $('.footer:first').position().top;
var winHeight = $(window).height();
$(window).on('scroll', function(e) {
  var bot = $(window).scrollTop() + winHeight;
  if (bot >= footTop) {
    window.scrollTo(0, footTop - winHeight);
  }
});
$('button').on('click', () => $(window).off('scroll'));
.cover {
  position: relative;
  height: 1000px;
  background: chocolate;
}

.header {
  position: relative;
  height: 1000px;
  background: antiquewhite;
}

.footer {
  position: relative;
  height: 2000px;
  background: burlywood;
}

button {
  position: absolute;
  bottom: 10px;
  right: 0;
  left: 0;
  width: 100px;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cover"></div>
<div class="header"><button>Дальше</button></div>
<div class="footer"></div>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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