функция проверки позиции скролла

426

19 января 2017, 05:59

Есть функция с помощью которой можно проверить "проскроллен ли скролл сайта до видимости определенного объекта":

function isScrolledIntoView(elem) {
  var docViewTop = $(scroll).scrollTop();
  var docViewBottom = docViewTop + $(scroll).height();
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

допутсим isScrolledIntView('footer') вернет true если мы проскроллили вниз и "видим" футер.

Я бы хотел узнать, как можно изменить функцию и задавать ей параметры, чтобы определять допустим *проскроллен ли скролл .testdiv'a до .li:last-child, который находится в нём, т.е. проверять позицию скролла блока, а не всего окна по отношению внутренним объектам?

Answer 1

Поскольку offset() рассчитывает положение элемента с учетом его сдвига (скрола), вам нужно сравнить лишь offset() одного элемента с другим:

function isScrolledIntoView(elem, scroll) { 
  if (scroll === undefined) scroll = window; 
 
  var docViewTop = $(scroll).offset().top; 
  var docViewBottom = docViewTop + $(scroll).height(); 
 
  var elemTop = $(elem).offset().top; 
  var elemBottom = elemTop + $(elem).height() 
   
  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 
 
$('#container').scroll(function() { 
  console.log(isScrolledIntoView('#elem', '#container')) 
})

#container { 
  height: 200px; 
  overflow-y: scroll; 
  margin-Top: 50px; 
} 
#inner { 
  position: relative; 
} 
#elem { 
  position: absolute; 
  top: 300px; 
  background: #ccc 
} 
#elem2 { 
  position: absolute; 
  top: 400px; 
  background: #ccc 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="container"> 
  <div id="inner"> 
    <div id="elem">test</div> 
    <div id="elem2">&nbsp;</div> 
  </div> 
</div>

Хотел бы заметить, что текущее условие ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); выполняется только если элемент виден целиком.