chrome中的jScrollPane 2.0高度问题

Posted 2023-03-06

【中文标题】chrome中的jScrollPane 2.0高度问题

【英文标题】：jScrollPane 2.0 height problem in chrome

【发布时间】：2011-04-18 18:00:31

【问题描述】：

我在绝对定位的 div 中使用具有类滚动窗格（高度 100%）的 div。滚动窗格 div 首先包含一些文本，然后是图像，然后是一些文本。图像高度设置为 200 像素。 问题是！如果我在 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 中。如果你牢记这一点，它就会成功。

【问题讨论】：

非常感谢！这正是我一直在寻找的！很好的答案！它困扰了我很长时间。只是永远不要抓住问题。 “图像”样式... :|好吧，我现在要制作一个 jQuery 来获取任何图像的所有样式，并将它们分别添加到每个 img 'style' 属性中。曹

【参考方案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）。

希望对你有帮助:)

【讨论】：

嗨。我对这种快速帮助印象深刻，因为这是我在这里的第一个问题。其实你是对的，我在发布我的问题后发现了这一点。

我喜欢 autoReinitialize 选项，但我不得不远离它，因为它使我的整个 scrollTo 过渡非常不稳定。我找不到解决这个问题的方法。

它只在 IE 中不稳定（使用 IE8）。也许有人也有解决方案。

请查看我的更新以获得我的最终解决方案。很抱歉我一口接一口，但我仍然必须习惯那个我以前从未使用过的新门户。

很高兴您找到了解决方案。有趣的是，直接在图像上添加宽度和高度对你不起作用——我确信我之前已经成功地做到了。您是想将它们添加为属性还是样式标签？

【参考方案2】：

在$(window).load而不是$(document).ready中调用jscrollpane

【讨论】：

请注意，从 jQuery 版本 1.8 开始不推荐使用 load 事件。新方式显示在why $(window).load() is not working in jQuery?

【参考方案3】：

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

例如：

.scroll-pane line-height: 1;

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

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

autoReinitialise: true

虽然它在计时器上运行，但请谨慎使用。

【参考方案4】：

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

<div class="scroll-pane">
<img src="image.jpg"    />
</div>

这将修复 jScrollPane 的 webkit 错误。哦，当然是在 JS 之前加载 CSS