1

编辑：我已经将代码（在下面和小提琴中）简化为需要解决的主要问题，以期创造更多的可读性。

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

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

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

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

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

然后我用Math.floor四舍五入到我的 rem 值的最接近的倍数。

然后我使用这个新值在 flex-centered 容器上创建一个 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'");

}

这是小提琴。

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

谢谢！

4

3 回答 3

1

以下是一些错误/更正。

GetBoundingClientRect() 是一个 JS 函数，而不是 jQuery，所以它必须用于 javascript 元素，而不是 jquery 选择器。在 jquery 选择器上使用 [0] 访问器（如果这是您想要的方式）将为您提供 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');

编辑：关于您的编辑，如果您需要调用 javascript 来重新计算窗口调整大小，您可能想尝试这样的事情。我不确定它是否完全达到了你想要的（我不完全理解你的“捕捉”要求，但这至少会再次调用代码。如果没有，你可能仍然需要在 snapFunction 中编辑代码' t 适合您的需求。

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

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 为底的数字。

于 2018-08-28T19:26:58.963 回答
0

我希望这能帮到您

这是编辑过的小提琴

jsfiddle.net/ztf64mwg/82/

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

于 2018-08-28T19:20:57.210 回答
0

我最终选择了 HackHands，并在帮助下想出了一个很好的解决方案。

这会将任何垂直 flex 居中的对象捕捉到其大小设置为 1rem 的网格。

您需要做的就是为正在测量距离的对象提供 id 属性“measure”，确保该对象与其容器顶部的 1rem 网格正确对齐。

然后为您想要捕捉到网格的父容器（或 DOM 树中更高的任何容器）指定“捕捉”类。

如果有人发现这个用途并需要进一步解释，请告诉我。

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);
});
于 2018-09-15T01:03:20.010 回答