我不使用jQuery。 没有它可以解决这个问题吗?
我只有1个HTML / JavaScript /(CSS)页面。 它包含在同一页面上引用html元素的链接。 该页面有一个自动垂直滚动条,因为它很长。 我需要链接点击的事件处理程序来检查在点击时引用的元素是否在屏幕上。 如果它在那里页面不应该改变位置。 这可能吗?怎么样?
检查是否在屏幕上 不要移动页面此代码是一个简单的示例,页面跳转,以便“hello world 2”位于浏览器窗口的最顶层。
<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>I don't use jQuery. Can this be solved without it ?
I have only 1 HTML / JavaScript / (CSS) page. It contains links that reference html elements on the very same page. The page has a automatic vertical scrollbar because it is long. I need my event handler for link clicks to check if the referenced element is on the screen at the moment of the click. If it is there the page should not change position. Is that possible and how ?
check if on screen don't move pageThis code is a simple example that the page jumps so that the "hello world 2" is on the very top of the browser window.
<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>最满意答案
你试过吗?
getElementByTagName()???
Ok, I solved it by myself (yes with some help of the referenced duplicate question). Using no jQuery:
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(); }更多推荐
发布评论