使用Javascript getBoundingClientRect将项目捕捉到网格

编辑：我已经简化了下面的代码，并将其细化到需要解决的主要问题，以期创造更多的可读性

我已经实现了Bader的解决方案，正确使用getBoundingClientRect值，并使用document.querySelector获取函数所需的类名和html标记。现在我想继续讨论代码的最后五行，以var=style开头

我现在已经修正了最后两个变量的数学

→ 我正在尝试创建一个快照功能，与基线网格Sass插件一起使用

基本上，我有一个垂直居中的flex项，它需要向上捕捉到最近的网格线，而不是完全居中。这将使我能够在定制的移动体验中，在幻灯片之间保持一致的垂直节奏

我正在使用getBoundingClientRect计算对象底部和窗口顶部之间的距离

然后我使用Math.floor向下取整到我的rem值的最近倍数

然后，我使用这个新值在以flex为中心的容器上为对齐修复创建CSS底部边距

最后，我想在$document.ready和windowresize上加载这个函数

function() {

  var box = document.querySelector('.box-1');
  var rect = box.getBoundingClientRect();
  var bottomOrig = rect.bottom;

  var htmlRoot = document.querySelector('html');
  var style = getComputedStyle(htmlRoot);
  var remValue = style.getPropertyValue('font-size');

  var bottomNew = Math.floor(bottomOrig / remValue) * remValue;
  var fix = bottomOrig - bottomNew;

  $('.container-2').css("margin-bottom", "fix + 'px'");

}

我很可能在这里遇到语法问题，非常感谢您的帮助

---

谢谢

我希望这对你有帮助

这是经过编辑的小提琴

jsfiddle.net/ztf64mwg/82/

---

我刚刚编辑了一些变量并修复了一些错误

以下是一些错误/更正

GetBoundingClientRect是一个JS函数，而不是jQuery，因此它必须用于javascript元素，而不是jQuery选择器。如果您希望使用jquery选择器上的[0]访问器来获取它，那么将为您提供JS元素

还注意到您试图按id选择html标记，但它没有任何id。将其更改为getElementsByTagName

var offsetYOrig=$”.box-1'[0]。getBoundingClientRect.bottom； //或者，如果没有jQuery： //var offsetYOrig=document.getElementsByClassName'box-1'[0].getBoundingClientRect.bottom； var html=document.getElementsByTagNamehtml[0]； var style=window.getComputedStylehtml；

---

var remValue=style.getPropertyValue'font-size' 我最终跳到了黑客的手上，在他们的帮助下，我想出了一个非常有效的解决方案

这会将任何垂直以柔体为中心的对象捕捉到其大小设置为1rem的栅格

您所需要做的就是为正在测量距离的对象指定id属性measure，确保该对象与其容器顶部的1rem栅格正确对齐

然后为父容器或DOM树中更高的任何要捕捉到网格的容器指定snap类

如果有人发现这有什么用，需要进一步解释，请告诉我

function snap(object){  

    var rect = object.getBoundingClientRect();
    var bottomOrig = rect.bottom;

    var htmlRoot = document.querySelector('html');
    var style = getComputedStyle(htmlRoot);
    var remValue = parseInt(style.getPropertyValue('font-size'));

    var bottomNew = Math.floor(bottomOrig / remValue) * remValue;

    var topFixPositive = bottomNew - bottomOrig;
    var topFixNegative = -Math.abs(topFixPositive);

    $(object).closest('.snap').css("margin-top", topFixNegative);

}


function snapClear(object){  

    $(object).closest('.snap').css("margin-top", "0");

}


var measureHome = document.querySelector('#measure');

snap(measureHome);

$(window).on('resize', function() {
    snapClear(measureHome);
    snap(measureHome);
});

---

我已经用您建议的编辑对上面的fiddle和代码进行了更改，但是我仍然没有成功地为.container-2创建所需的CSS样式更改。我还尝试用事件侦听器删除代码的第二部分，并将Fiddle加载类型更改为On-Load，但没有成功。还是需要一些帮助！如果成功的话，这对我来说将是一个突破。我用一些额外的提示更新了我的答案，可能会对你有所帮助。如果你需要进一步的帮助，我可能不得不请你澄清你所描述的抓拍动作是什么意思。