2

как динамический во время scroll определить текущее местоположение элемента по отношению к родителю или массива элементов...

воюю с js уже сутки...

getBoundingClientRect() - данная функция возвращает по отношению к window

не прошу готовый пример, просто в каком направлении двигаться и объясните суть метода или функции

P.S. "и очень прошу, увольте от примеров jQuery... мое личное мнение, что бы пользоваться чужими достижениями, как минимум сам чего то должен стоить..."

3
  • 1
  • 1
    у тебя есть функция дающая тебе позицию элемента ... находишь позицию родителя и позицию дочернего элемента .... вычитаешь из одного другое ... или ты думаешь, что там написана ложь и на самом деле есть дефолтная функция таки? Там же есть готовая функция getCoords которую надо самому написать и потом к ней обращаться. 23 авг 2017 в 9:26
  • 1
    ну, тут я не помощник ... функции такой нет, по такому же принципу работает и $(elem).offset() в jQuery, может они тоже не разбираются ... 23 авг 2017 в 9:40

1 ответ 1

2

MedvedevDev, прав.... Имея ввиду "есть стандартная функция" я перепутал с JQ...

var wrapper = document.querySelector('#wrapper');
var block = document.querySelector('#block');
wrapper.addEventListener('scroll', function(wrap, bl, total) {
  wrap = wrapper.getBoundingClientRect().top;
  bl = block.getBoundingClientRect().top;
  total = bl - wrap;
  document.querySelector('p').innerHTML =
    'позиция родителя по отношентю к доукенту - ' + wrap + '<br/>' +
    'позиция дочернего эл по отношентю к документу - ' + bl + '<br/>' + 'позиция дочернего эл по отношентю к родителю - ' + total;
})
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #282828;
  overflow: hidden;
  color: white;
}

p {
  position: fixed;
}

div#wrapper {
  margin-top: 100px;
  width: 100%;
  height: 100px;
  background: orange;
  overflow-y: scroll;
}

div#block {
  width: 100%;
  height: 100px;
  margin-top: 550px;
  background: cyan;
}
<p></p>
<div id="wrapper">
  <div id="block">Block</div>
</div>

Ваш ответ

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

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