Question

试图获取最靠近屏幕中间的元素。类似问题已经发布here。除非容器中的内容大于视口，否则这将非常有用。在我的方案中，默认情况下，内容不超过视口的高度，但是具有允许用户添加更多输入字段的功能，这可能意味着它超出了视口。

当您查看元素时，应该一直保持它（完全不透明），直到另一个元素更清晰为止，此时原始元素将变为低不透明度。

在这里查看我的小提琴：https://jsfiddle.net/6rzuqknx/4/-一旦您通过了第一个元素的一半，它就会变得不透明。以下两个函数是我当前用于获取最接近元素的函数：

// calculate what element is in middle of viewport
function closest(array, number) {
  var num = 0;
  for (var i = array.length - 1; i >= 0; i--) {
    if (Math.abs(number - array[i].position) < Math.abs(number - array[num].position)) {
      num = i;
    }
  }
  return array[num].element;
}

// get positions of all question divs
function getPositions() {
  var positions = [];

  $('.question').each(function() {
    // $(this).removeClass("showing");
    positions.push({
      position: $(this).position().top,
      element: $(this)
    });
  });

  return positions;
}

为我的代码一团糟而道歉，它在一个相当大的项目中，而且不是其中最简单的片段。

干杯们

Answer 1

要从我的评论中展开，应该这样做：

const centeredElement = document.elementFromPoint(
  document.body.offsetWidth / 2, document.body.offsetHeight / 2
);

获取最靠近屏幕中央的元素

1 个答案: