Javascript高度总和不匹配 [英] Javascript height sums don't match

问题描述

我有一个div，绝对定位，最初是不可见的，显示在元素图标的位置（在元素列表中）被点击呈现其预览（预览的顶部位置排列在图标的顶部点击）。当单击的元素位于页面的较低位置时，预​​览将呈现在原始页面边框的稍下方，并且需要滚动。我想向上移动预览，使其底边位于上一页底部限制。问题是我使用的代码没有返回页面高度的预期值（它大于预览高度和点击元素顶部位置的总和）。



这里是代码：文件1：

I have a div, absolutely positioned, originally non-visible that is shown at the position of an element icon (in elements listing) being clicked rendering its preview (top position of the preview is lined to the top of the icon clicked). When the element being clicked is positioned low on the page, the preview is rendered somewhat below the original page border, and scrolling is necessary. I want to move the preview upward to have its bottom edge on the previous page bottom limit. The problem is the code I use doesn''t return what is expected for the page height (it is greater than the sum of the preview height and the clicked-element top position).

Here''s the code: file 1:

jQuery(''elementClicked'').live(''click'',function(){
...
jQuery("previewDiv").setTopAtClickedElement(jQuery(this));
...
}

file 2：

file 2:

jQuery.fn.setTopAtClickedElement = function (element) {
//original positioning    
this.css(''top'', element.offset().top + ''px'');

// the troublesome part where the eventual correction should be done
if (element.offset().top + this.height() > jQuery(document).height())
{
    this.css(''top'', jQuery(document).height() - this.height() + ''px'');
}
}

类似的情况发生在我使用Math.max（document.body.sc rollHeight，document.body.offsetHeight，document.documentElement.clientHeight，document.documentElement.scrollHeight，document.documentElement.offsetHeight），用于衡量文档高度，如一个链接



这是视觉看看我想解释的内容，这里是 jsfiddle 。



您对如何实现代码中这个麻烦的部分有什么建议吗？



请告诉我是否还不够清楚。

非常感谢您的时间。

Similar happens when I use Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) for the measure of the document height as suggested on a link

Here is the visual look of what I am trying to explain, and here''s the jsfiddle.

Do you have any suggestions on how I should implement this troublesome part of the code?

Please tell if I wasn''t clear enough.
Thank you very much for the time.

推荐答案

您好，

我建议您更换全部

Hi,
I would suggest you to replace all the

href="#"

标签with

href="javascript:void(0);"

这将解决您的问题。

这篇关于Javascript高度总和不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！