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

Question

编辑：我已经简化了代码(下面和小提琴(到需要解决的主要问题，希望创造更多的可读性。

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

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

→ 我正在尝试创建一个捕捉功能，以便与基线网格 Sass 插件 Plumber 一起使用。

基本上，我有一个垂直居中的弹性项目，它需要 - 而不是完全居中 - 向上捕捉到最近的网格线。这将使我在基于移动设备的自定义体验中在幻灯片之间保持一致的垂直节奏。

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

然后我使用Math.floor向下舍入到最接近的 rem 值的倍数。

然后，我使用此新值在以弹性为中心的容器上创建 CSS 下边距以进行对齐修复。

(最后，我想在$(document).ready和窗口大小调整时加载此函数。

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'");
}

这是小提琴。

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

谢谢！

Answer 1

这里有一些错误/更正。

GetBoundingClientRect(( 是一个 JS 函数，而不是 jQuery，所以它必须用于 javascript 元素，而不是 jquery 选择器。在jquery选择器上使用[0]访问器(如果你想这样获取它的话(会给你JS元素。

还注意到您尝试按 id 选择"html"标记，但它没有任何 Id。

var offsetYOrig = $('.box-1')[0].getBoundingClientRect().bottom;
// or, without jQuery:
// var offsetYOrig = document.getElementsByClassName('box-1')[0].getBoundingClientRect().bottom;
var html = document.getElementsByTagName("html")[0];
var style = window.getComputedStyle(html);
var remValue = style.getPropertyValue('font-size');

编辑：关于您的编辑，如果您需要调用 javascript 来重新计算窗口大小，您可能需要尝试这样的事情。我不确定它是否完全实现了您想要的(我不完全理解您的"捕捉"要求，但这至少会再次调用代码。如果 snapFunction 中的代码不符合您的需求，您可能仍需要对其进行编辑。

我添加了一些控制台日志，可以帮助您检查数学，因为这对我来说似乎有点问题，尽管我不确定如何解决它，因为我不了解您的目标。

function snapFunction ()
{
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;
// open your browser console and check the value of these to check your math and what values you're getting
console.log("bottomOrig: " + bottomOrig )
console.log("remValue: " + remValue)
console.log("bottomNew: " + bottomNew )
// note: no quotes around your variable name fix here
$('.container-2').css("margin-bottom", fix + "px");
};
// call on load
(function() {
snapFunction();
})();
// call on resize
$( window ).resize(function() {
snapFunction();
});

我确实注意到您的 bottomNew 变量的值记录为"NaN"(不是数字(，所以我认为那里出了点问题。

我认为您得到的字体大小为"36px"而不仅仅是"36"。也许你可以试试

var remValue = parseInt(style.getPropertyValue('font-size'), 10);

该 parseInt 函数中的 10 只是指定我们要使用以 10 为基数的数字。

Answer 2

我最终跳上了HackHands，并在帮助下提出了一个很棒的工作解决方案。

这会将任何垂直以柔性为中心的对象对齐到大小设置为 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);
});

Answer 3

我希望这对你有帮助

这是编辑的小提琴

jsfiddle.net/ztf64mwg/82/

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