Question

我在绝对定位的div中使用带有类滚动窗格（高度100％）的div。滚动窗格div首先包含一些文本，然后是图像，然后再显示一些文本。图像高度设置为200px。问题是！如果我在Chrome（最新版本）中查看滚动窗格，我有时可以滚动整个内容，有时候，在浏览器中刷新网站之后，有时也不会。并不意味着我只能看到第二个文本的一部分而不是更多。所以实际的滚动高度会缩小。如果我再次刷新，我可能会再次看到它完成，等等。每次刷新浏览器时它都会改变。它只发生在Chrome中。

知道我可以做些什么来避免这种行为？谢谢......

UPDATE 它确实与导入（js和css）如何排在标题中有关。你是对的，css必须在jscrollPane js之前导入，但这也意味着图像高度需要来自其中一个css样式表。您无法在标记中的图像标记内定义高度。我的解决方案是在我的样式表中创建一个类，即img200（表示高度为200px），这就是诀窍。因此，需要做的是使其在Chrome或更好的webkit浏览器中工作：在样式表中为scrollPane中使用的图像设置图像高度类。在!!!!!之前加入您的样式表jScrollPane的javascript。将特殊高度类添加到包含在jScrollPane中的所有图片就是这样。再次感谢您的快速回答。很酷。

最终解决方案更新!!!!!!!!!
如果您在jScrollPane区域内有图片，则必须确保以下内容，以便在webkit浏览器中将其全部显示出来，例如Chrome或Safari。否则会导致身高问题，只有部分内容可见 这是您必须要做的事情：
确保css样式表和jScrollPane javascript文件的排列正确无误。 jScrollPane javascript文件需要遵循你的css样式表，而不是相反！此外，您还必须为jScrollPane区域中包含的每个图像添加高度。您可以通过创建css类来执行此操作，也可以将维度作为属性直接添加到html标记中的img。
如果你牢记这一点，它就可以解决问题。

Answer 1

您是否也在Safari中测试过？当javascript包含在文档头部的CSS之前时，这听起来像Webkit中出现的问题： http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

如果这不是原因，那么它可能与您在滚动窗格中有图像的事实有关。您需要包含图像的宽度和高度（请参阅http://jscrollpane.kelvinluck.com/image2.html）或自动重新初始化窗格（请参阅http://jscrollpane.kelvinluck.com/image.html）。

希望有所帮助：）

Answer 2

在$(window).load而不是$(document).ready

中调用jscrollpane

Answer 3

我还发现在.scroll-pane中为行高添加css规则可以解决我的身高问题。

例如：

.scroll-pane {line-height: 1;}

或您的内容可能需要的任何行高。

我还发现如果你使用@ font-face，jscrollpane可能会在你的字体正确加载之前进行高度计算，因此计算错误。我通过添加设置来修复此问题：

autoReinitialise: true

它运行在计时器上，所以请慎重使用。

Answer 4

如果您的jScrollPane div区域内有图像，只需定义其宽度和高度。

<div class="scroll-pane">
<img src="image.jpg" alt="" width="300" height="50" />
</div>

这将解决jScrollPane的webkit错误。哦，当然在JS之前加载CSS

chrome中的jScrollPane 2.0高度问题

4 个答案: