chrome中的jScrollPane 2.0高度问题

Question

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

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

更新 它确实与导入（js 和 css）在标头中的排列方式有关。你是对的，CSS 必须在 jscrollPane js 之前导入，但这也意味着图像高度需要来自 CSS 样式表之一。您无法在标记中的图像标签内定义高度。我的解决方案是在我的样式表中创建一个类，即 img200（代表 200px 的高度），这就成功了。 因此，要使其在 Chrome 或更好的 webkit 浏览器中正常工作，需要做什么： 在样式表中为滚动窗格中使用的图像设置图像高度类别。 之前包括你的样式表！！！！ 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 中调用 jscrollpane，而不是 $(document).ready

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