element.getBoundingClientRect не согласуется с window.innerHeight

Question

Я пытаюсь выяснить, частично ли виден элемент в нижней части области просмотра, используя следующий код:

var child = document.getElementsByClassName('className')[0];
var top = child.getBoundingClientRect().top;
var bottom = child.getBoundingClientRect().bottom;
var partiallyVisibleBottom = top > 0 && bottom > window.innerHeight;

Он не работает должным образом.

Когда я прокручиваю так, что интересующий элемент виден только частично, и наблюдаю переменные, я вижу, что bottom равно 900, а window.innerHeight равно 1000. Однако, поскольку нижняя часть элемента обрезанаЯ ожидаю, что это будет правдой: bottom > window.innerHeight.

Что я делаю не так?

Не уверен, что это актуально, но этот код работает внутри Android WebView.

Answer 1

В конце концов я обнаружил, что проблема была в логике, которая определила «дочерний» диапазон.Оказалось, что было несколько диапазонов с одинаковым именем класса (ошибка), что привело к этому неожиданному результату.

Answer 2

Комментарий многое прояснил :-D С вашим новым вкладом может быть полезным.Здесь мы используем некоторые хитрости, чтобы добиться цели.Обратите внимание:

• чистый JS, без jQuery (но это будет еще проще с jQuery, так что это ваш вызов);
• посмотрите, как получается цель события, этодля максимальной кросс-совместимости браузера - без этого вы оставите некоторые браузеры позади;
• необходим фильтр для "span1|span2|span3", потому что пользователь может очень хорошо щелкнуть один пиксель от фактического диапазона ;
• как вычисляется и сохраняется логическое частичное для последующего использования;
• известен id диапазона;
• обработчик событий присоединен к div.container, а не промежутки (используется всплывающее окно событий);
• использование CSS overflow-y: scroll для включения только вертикальной полосы прокрутки;
• внешняя div (container) можетбудь целым окном ... или нет!

Я надеюсь, что это вдохновит вас на то, как это сделать в вашем случае, я думаю, вы не можете использовать этот код напрямую, вам придется выбирать извыше список того, что вам нужно ...

document.getElementById("container").onclick = (ev) => {
  var container, target, crect, trect, partial;

  ev = ev || window.event;
  target = ev.target || ev.srcElement;

  if ("span1|span2|span3".indexOf(target.id) !== -1) // only if a known element was actually clicked!
  {
    container = document.getElementById("container");
    crect = container.getBoundingClientRect();
    trect = target.getBoundingClientRect();

    partial = trect.top < crect.top || trect.bottom > crect.bottom;

    document.getElementById("status").innerText = 
      "target: " + target.id + " partial: " + partial;
  }
};

STATUS

Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток.Это первый промежуток. Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток.Это второй промежуток. Это третий промежуток.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий пролёт.Это третий диапазон.