Question

我有一个看起来有点像这样的HTML文档，只是更复杂，更难控制：

<body>
  <div id="title">This div does not do anything, just stays at the top.</div>
  <div id="container">
    <div id="navigation">Some navigation</div>
    <div id="content">Most of the content</div>
  </div>
</body>

然后我有一个包含以下内容的样式表：

#container
{  
   height: auto !important;
   overflow: visible !important;
   overflow-x: auto;
   overflow-y: scroll;
   position: relative;
   width: auto !important;
}

这一切都非常完美。 title部分位于页面顶部，如果内容足够长，需要滚动，container div可以滚动，否则不会滚动。

问题是，我正在使用Javascript向content div添加更多内容。这意味着{<1}} div在加载之后比页面更长，这似乎意味着，至少在IE8中，content上的滚动条永远不会得到已激活，因此一旦Javascript添加的内容从页面底部掉落，就会无法访问。

当我开始修改IE开发人员工具时，滚动条完全消失，我无法重新出现，因此测试变得有些困难，这无济于事。

Answer 1

我知道IE8在overflow-y方面存在一些问题。

你应该尝试这个。

-ms-overflow-y: scroll;

希望有所帮助。

Answer 2

很难说如果没有看到更多代码，这是否可行，但为什么不从css中删除样式，并在内容加载后用javascript添加它们。

Answer 3

有效的解决方案是使用JavaScript调整元素大小的简单方法，以便在我向其添加额外数据后匹配实际大小，如下所示：

document.all['container'].style.height = document.documentElement.clientHeight+"px";

当然，这并不能完全避免这个问题 - 因为我们需要一个新功能：

function resizeResults()
{
    var resultPanel=document.all["container"];
    var topPanel=document.all["title"];
    var newHeight= document.documentElement.clientHeight;
    newHeight -= topPanel.clientHeight;
    resultPanel.style.height=newHeight;
}

然后我们可以使用window.attachEvent("onresize", resizeResults);来确保我们不会丢失滚动条，或者在用户更改窗口大小时让它们乱七八糟。

Answer 4

在加载ajax内容之前，只需删除为元素指定的样式以使其滚动。加载ajax内容后再重新添加这些属性。

使用Javascript将内容添加到div时，不会出现溢出div上的滚动条

4 个答案: