Javascript 滚动到元素

我需要在其他div中滚动到

div

我使用的是

scrollIntoView

，问题是即使div完全可见

scrollIntoView

也会滚动到元素中，因此元素与父div的顶部对齐

这会在每次我聚焦时产生“跳跃”效果，即使元素完全可见。请参见下面的示例：按C键根本不应滚动（仅按G；）应该

我想知道是否有一种方法可以只在元素不完全可见时滚动到元素中

在Chrome55+上尝试此功能

---

谢谢

尝试以下示例……滚动到div。。。只需提供您的DIV id或class

HTML代码：

<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>

在我里面滚动！

JS代码：

<script>
function myFunction() {
    var elmnt = document.getElementById("myDIV");
    var x = elmnt.scrollLeft;
    var y = elmnt.scrollTop;
}
</script>

函数myFunction（）{
var elmnt=document.getElementById（“myDIV”）；
var x=elmnt.slollLeft；
变量y=elmnt.scrollTop；
}

您可以首先检查元素是否在父元素中可见，如果可见，只需返回即可。查看此答案，了解有关如何检查某事物是否在视图中的一些想法：

然后像这样做：

function setFocus(id) {
    var el = document.getElementById(id);

    if(isElementVisible(el) === true) {
        return;
    }

    el.scrollIntoView();
}

---

注意：这里唯一的问题是，如果G在视图中只有1px，那么它将不会滚动到它。更好的解决办法是做一个检查，看看它是否“完全”在视野中。。。这要由你来决定；）

您可以将当前页面的顶部和底部与如下元素进行比较：

var el = document.getElementById(id);

var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = el.offsetTop;
var elemBottom = elemTop + el.offsetHeight;

if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)){
   return false;       
}
else{
   el.scrollIntoView();
} 

var el=document.getElementById（id）；
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=el.offsetTop；
var elemBottom=elemTop+el.离地高度；
如果（（elemBottom=docViewTop））{
返回false；
}
否则{
el.scrollIntoView（）；
} 

此解决方案基于可见性计算。您将计算元素的

边框框是否位于
视口的内部。如果不是，则滚动到该元素


函数设置焦点（id）{
var el=document.getElementById（id）；
如果（！isVisible（el））{
el.scrollIntoView（）；
}    
}
函数是可见的（元素）{
var borderBox=element.getBoundingClientRect（）；
var viewWidth=window.innerWidth | | doc.documentElement.clientWidth；
var viewHeight=window.innerHeight | | doc.documentElement.clientHeight；
var efp=函数（x，y）{return document.elementFromPoint（x，y）}；
//如果不在视口中，则返回false
如果（borderBox.left>viewWidth | | borderBox.top>viewHeight||
borderBox.right<0 | | borderBox.bottom<0）
返回false；
//如果四个角中的任何一个可见，则返回true
返回(
元素.contains（efp（borderBox.left，borderBox.top））
||元素.contains（efp（borderBox.right，borderBox.top））
||元素.contains（efp（borderBox.right，borderBox.bottom））
||元素。包含（efp（borderBox.left，borderBox.bottom））
);
}
.container{
高度：4厘米；
溢出：自动；
}
.项目{
高度：1厘米；
边框：1px实心#000；
}

A.
B
C
D
E
F
G
关注C
专注于G
谢谢，我只是认为可能有css选择器可以做到这一点，但显然不是。Mhm nop您需要创建一个自定义函数来处理检测。
scrollIntoView
还可以接收一个布尔值，指向顶部（
true
）或底部（
false
）