Question

我需要将div中的某个元素（不是直接孩子）滚动到视图中。

基本上我需要与ScrollIntoView提供的功能相同的功能，但对于指定的父级（只有此父级应该滚动）。
此外，我无法使用任何第三方库。

我不太确定如何处理这个问题，因为我的JavaScript开发非常有限。有人可以帮助我吗？

我发现this code可以完全满足我的需要，但不幸的是它需要JQuery，我无法将其翻译成纯JavaScript。

Answer 1

我想我有一个开始。当您考虑这个问题时，您会考虑将子div放入父级的可视区域。一种天真的方式是使用页面上的子位置相对于父页在页面上的位置。然后考虑父母的滚动。下面是一个可能的实现。

function scrollParentToChild(parent, child) {

  // Where is the parent on page
  var parentRect = parent.getBoundingClientRect();
  // What can you see?
  var parentViewableArea = {
    height: parent.clientHeight,
    width: parent.clientWidth
  };

  // Where is the child
  var childRect = child.getBoundingClientRect();
  // Is the child viewable?
  var isViewable = (childRect.top >= parentRect.top) && (childRect.top <= parentRect.top + parentViewableArea.height);

  // if you can't see the child try to scroll parent
  if (!isViewable) {
    // scroll by offset relative to parent
    parent.scrollTop = (childRect.top + parent.scrollTop) - parentRect.top
  }


}

只需将父节点和子节点传递给它：

scrollParentToChild(parentElement, childElement)

在主元素甚至嵌套元素

上添加了使用此函数的演示

https://jsfiddle.net/nex1oa9a/1/

Answer 2

你可以做一些简单的事情：

function customScroll(id) {
    window.location.href = "#mydiv"+id;
}

基本上window.location.href可以帮到你。

Answer 3

此功能可以通过几个步骤实现。首先，您使用childElement.getBoundingClientRect();获得孩子的位置这将返回以下值

bottom : val
height: val
left: val
right: val
top: val
width: val

然后，只需将子元素根据左上角的值放入父元素中，将子元素position保持为absolute。父元素的position必须为relative类型才能正确放置孩子并获得ScrollIntoView的效果。

childElement.style.position = 'absolute';
childElement.style.top = 'value in px';
childElement.style.left = 'value in px';

纯JavaScript - Div

3 个答案: