scrollHeight not working with position:absolute_问答_开发者

scrollHeight not working with position:absolute

开发者 https://www.devze.com 2023-03-18 21:19 出处：网络

I am trying to retrieve the body\'s scrollHeight in order to reset the size of a div with id=\"background1\".If in my external css I set that id to position:absolute the scrollHeight always returns 0.

相关专题：css javascript

I am trying to retrieve the body's scrollHeight in order to reset the size of a div with id="background1". If in my external css I set that id to position:absolute the scrollHeight always returns 0. If I set it to position:relative scrollHeight gives me the correct value. There are of course many more selectors in the css one other of which is set to position:absolute - leaving it as such doesn't change the above behavior. The code :

<script type="text/javascript">

  function getElement(elem)  {

     var art;

     if ( document.all ) {                  // this is the way old msie versions work      
       art = document.all[elem];  开发者_JAVA百科
     }
     else if ( document.layers ) {          // this is the way nn4 works    
       art = document.layers[elem];
     }
     else if ( document.getElementById ) {  // this is the way the standards work    
       art = document.getElementById( elem );
     }

     return art;
}

function toggleArticleDisplay(elem)  {

  var artArray = document.getElementsByTagName("article");

  for(var i = 0; i < artArray.length; i++)  {
     artArray[i].style.display = "none";
   }

   var art = getElement(elem);
   art.style.display = "block";

   var bg1 = document.getElementById("background1");
   bg1.style.height = "550px";  

   var b = document.getElementById("potoococha");

   alert(b.scrollHeight);

   bg1.style.height = (b.scrollHeight >= window.innerHeight) ? 
           (b.scrollHeight+20) + "px" : window.innerHeight + "px";
 }

</script>

</head>

<body id="potoococha" onLoad="toggleArticleDisplay('homeText')">

<div id="background1" style="height:615px;"/>

And now the css :

div#background1  {  position         : absolute;
                    left             : 45px;
                    top              : 0px;
                    z-index          : 1;
                    width            : 50px;
                    background-color : rgba(182,181,91,1.0); }

Merely changing that position to relative makes the javascript function return the correct scrollHeight but I need this as absolute for other reasons. Does scrollHeight not work if some element is absolutely positioned? As I said there is another later absolutely positioned element which doesn't have any effect on scrollHeight's return value. Only this element which is the first child of the body element seems to be a problem. Any ideas?

This is kinda a dirty hack, but you could try to do this:

bg1.style.position = "relative"; 

var savedHeight = b.scrollHeight;

bg1.style.position = "absolute";

Not sure if that'll work, but maybe give it a try.

I've solved the issue controlling the variable

document.scrollingElement.scrollHeight

instead of

document.body.scrollHeight

scrollHeight not working with position:absolute

精彩评论

关注公众号

热门标签

图文推荐

scrollHeight not working with position:absolute

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：