使用Javascript getBoundingClientRect将项目与网格对齐
编辑:我已经简化了代码(下面和小菜一碟)，以减少需要解决的主要问题，希望创造更多的可读性。
我已经实现了巴德的解决方案，正确地使用getBoundingClientRect值，并使用document.querySelector来获取函数所需的类名和html标记。现在，我想从var = style__开始，转到代码的最后五行。
我现在已经纠正了最后两个变量的数学。
Sass我正在尝试创建一个与Plumber一起使用的捕捉功能，这是一个基线网格→插件。
基本上，我有一个垂直居中的flex项目，它需要向上捕捉到最近的网格线，而不是完全居中。这将允许我在自定义的基于移动的体验中，在幻灯片之间保持一致的垂直节奏。
我使用getBoundingClientRect来计算对象底部和窗口顶部之间的距离。
然后我使用Math.floor向下舍入到rem值的最接近的倍数。
然后，我使用这个新值在以flex为中心的容器上创建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'");
}我很可能在这里有一个语法问题，非常感谢你的帮助。
谢谢!
回答 3
Stack Overflow用户
发布于 2018-09-15 09:03:20
我最终跳到了HackHands上，在帮助下，我想出了一个很好的解决方案。
这会将任何以垂直柔体为中心的对象捕捉到大小设置为1 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);
});Stack Overflow用户
发布于 2018-08-29 03:26:59
以下是一些错误/更正。
GetBoundingClientRect()是一个JS函数，而不是jQuery，因此它必须在javascript元素上使用，而不是在jquery选择器上使用。在jquery选择器上使用访问器(如果这是您希望获得它的方式)将为您提供JS元素。
我还注意到，您试图通过id选择"html“标记，但它没有任何Id。将其更改为getElementsByTagName。
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');
Edit:关于您的编辑，如果您需要调用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为基数的数字。
Stack Overflow用户
发布于 2018-08-29 03:20:57
我希望这能对你有所帮助
这是编辑过的小提琴
jsfiddle.net/ztf64mwg/82/
我只是编辑了一些变量，修复了一些错误
https://stackoverflow.com/questions/52064671
复制相似问题