Остановите прокрутку мыши с помощью идентификатора переменной или класса, а не номера пикселя - PullRequest
Новая
       20

Остановите прокрутку мыши с помощью идентификатора переменной или класса, а не номера пикселя

3 голосов
/ 05 февраля 2020

Я пытаюсь остановить прокрутку переменной вместо измерения в пикселях.

РОЗОВЫЙ - верх моей страницы. ЖЕЛТЫЙ - ничего особенного, но КРАСНЫЙ - это то, где я пытаюсь остановить действие прокрутки. используя переменную для вызова идентификатора по моему выбору. Пользователь все еще должен иметь возможность прокручивать вверх, но никогда не прокручивать дальше красного div.

Я нашел несколько примеров с использованием пикселей, но моя страница меняет высоту, поэтому я пытаюсь нацелиться на id из div с помощью переменная вместо позиции в пикселях.

Моя сломанная скрипка: http://jsfiddle.net/mikeloucas/d7o8exub/52/

PS Я делаю анимацию, поэтому пытаюсь держать пользователя включенным красный div, пока они не нажмут кнопку «остановить прокрутку». (У меня эта часть работает в другом месте, а не здесь, но она основана на пикселях.) 

$(document).ready(function() {
  var StartTop = $("#beginning").offset().top;

  /* $(document).scrollTop(StartTop); */
  var EndGame = $("#stopHere").height();

  $(document).on("scroll", function(e) {
    var windowScrollTop = $(window).scrollTop();
    if (windowScrollTop < EndGame) {
      $(document).scrollTop(EndGame);
    } else if (windowScrollTop > EndGame) {
      $(document).scrollTop(StartTop);
    }
  });
});
body {
  margin: 0;
}

#beginning {
  height: 200px;
  background: pink;
}

.genBox {
  height: 500px;
  background: yellow;
  width: 90%;
  margin: 0 auto;
}

#stopHere {
  height: 500px;
  background: red;
  width: 90%;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="beginning"></div>
<div class="genBox"></div>
<div class="genBox"></div>
<div id="stopHere"></div>
<div class="genBox"></div>

1 Ответ

2 голосов
/ 05 февраля 2020

Как насчет установки положения прокрутки на основе положения div? Не совсем уверен, что это то, что вы ищете ... 

const lowDivTop = document.getElementById('low').getBoundingClientRect().top + window.scrollY
document.addEventListener('scroll', e => {
    window.scrollTo(0, Math.min( lowDivTop - window.innerHeight, window.scrollY));
})
#top, #mid, #low{
  width: 100px;
  height: 200px;
}
#top{
  background: yellow
}
#mid{
  background: orange
}
#low{
  background: red
}
<div id='top'></div>
<div id='mid'></div>
<div id='low'></div>
...