获取从 div 的高度 + 到顶部的距离滚动的像素数量

Question

我正在 jQuery 或纯 JS 中寻找一种方法来获取滚动的像素数量，不是从页面顶部，而是从 div 的底部。

换句话说，我需要将滚动量超出div的高度+它与页面顶部的像素距离变成一个变量。

我想在下面附加此视差代码，而不是从页面顶部计算，而是从目标 div 到顶部的距离 + 高度计算。

/* Parallax Once Threshold is Reached */

var triggerOne = $('#trigger-01').offset().top;     

$(window).scroll(function(e){

  if ($(window).scrollTop() >= triggerOne) {

    function parallaxTriggerOne(){                                   
      var scrolled = $(window).scrollTop();
      $('#test').css('top',+(scrolled*0.2)+'px');
    }

    parallaxTriggerOne();

  } else {
    $('#test').css('top','initial');
  }  

});

我意识到我说得不够清楚，我只想获得自通过 div 以来滚动的像素数量的值，例如，如果我有 200 像素高div 在页面的最顶部，我滚动超过它 20 个像素，我需要的那个变量等于 20，而不是 220。

Answer 1

要计算出页面顶部到元素底部的距离，您可以添加一个元素 outerHeight() 及其 offset().top.

示例：https://jsfiddle.net/dw2jwLpw/

console.log(
    $('.target').outerHeight() + $('.target').offset().top
);

Answer 2

在纯 JS 中，您可以直接使用 document.getElementById("my-element").getBoundingClientRect().bottom 获取 div 的底部。

在jQuery中你可以使用$('#my-element').offset().top + $('#my-element').height()

Answer 3

您可以通过使用div.offsetTop获得div的位置，将 div.offsetHeight 添加到 div 与页面顶部的距离将得到 div 的底部，然后您可以从 window 的滚动中减去以获得所需的值。

如有任何疑问，欢迎随时提问。

var div = document.getElementById('foo');
let div_bottom = div.offsetTop + div.offsetHeight;
var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var scroll_top, scroll_after_div;

setInterval(function(){
  scroll_top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
  scroll_after_div = scroll_top - div_bottom;
  console.log(scroll_after_div);
}, 1000);

body { margin: 0; }

<div id="foo" style="position:relative; top: 100px; height: 30px; width: 100%; background-color: #000;"></div>

<div id="bar" style="position:relative; top: 700px; height: 30px; width: 100%; background-color: #000;"></div>

在此代码段中 setInterval 方法每秒打印滚动值，您可以滚动并查看值的变化。

获取从 div 的高度 + 到顶部的距离滚动的像素数量

Get amount of pixels scrolled from a div's height + its distance from the top

javascript

jquery

scroll

distance

parallax