Javascript 如果html元素在屏幕上，如何不移动页面？
我不使用jQuery。没有它能解决这个问题吗 我只有一个HTML/JavaScript/（CSS）页面。它包含引用同一页面上html元素的链接。该页面有一个自动垂直滚动条，因为它很长。我需要我的链接点击事件处理程序来检查点击时被引用的元素是否在屏幕上。如果有，页面不应改变位置。这有可能吗？怎么可能Javascript 如果html元素在屏幕上，如何不移动页面？,javascript,html,hyperlink,Javascript,Html,Hyperlink,我不使用jQuery。没有它能解决这个问题吗 我只有一个HTML/JavaScript/（CSS）页面。它包含引用同一页面上html元素的链接。该页面有一个自动垂直滚动条，因为它很长。我需要我的链接点击事件处理程序来检查点击时被引用的元素是否在屏幕上。如果有，页面不应改变位置。这有可能吗？怎么可能 检查屏幕上是否显示 不要移动页面 这段代码是一个简单的例子，页面会跳转，因此“hello world 2”位于浏览器窗口的最顶部 <html> <head>
<html>
<head>
<script type='text/javascript' language='javascript'>
function onLinkClick(id)
{ }
</script>
</head>
<body>
<div id="id1">hello world 1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="id2">hello world 2</div>
<a href="#id2" onclick="onLinkClick('id2')">link</a>
<div id="id3">hello world 3</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
函数onLinkClick（id）
{ }
你好，世界1
你好，世界2
你好，世界3
function isElementVisible(element)
{
var posTop = 0;
var temp = element;
while (temp)
{
posTop += temp.offsetTop;
temp = temp.offsetParent;
}
var posBottom = posTop + element.offsetHeight;
var visibleTop = document.body.scrollTop;
var visibleBottom = visibleTop + window.innerHeight;
return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}
function onLinkClick(id)
{
var x = document.getElementById(id);
if (isElementVisible(x))
// prevent page to be scrolled up or down
event.preventDefault();
}
函数isElementVisible（元素）
{
var-posTop=0；
var-temp=元素；
while（临时）
{
后处理+=温度偏移；
temp=temp.offsetParent；
}
var posBottom=posTop+element.offsetHeight；
var visibleTop=document.body.scrollTop；
var visibleBottom=visibleTop+window.innerHeight；
返回（（posBottom>=visibleTop）和（请在此处查看一个可能重复的问题：@ChristoferEliasson检查可见性的可能重复项也是我问题的一部分。@mini me如果您的回调函数返回false
，则事件将停止，浏览器将不会滚动页面。在您的回调函数中，检查元素是否正确。）已经可见-如果它是returnfalse
，否则returntrue
@mini-me这并没有错，从回调返回false
确实会阻止默认行为-更详细。但是，确实可以调用preventDefault（）
在活动中，也要做到这一点——这样做实际上是一种更现代的实现方式。谈到现代的做事方式，也许值得一提的是，还有更现代的做事方式