Chrome中的jScrollPane 2.0高度问题 [英] jScrollPane 2.0 height problem in chrome

问题描述

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

任何想法我可以做什么来避免这种行为？谢谢.....

更新
它确实与导入（js和css）如何排列在标题中有关。你是对的，CSS必须在jscrollPane js之前导入，但这也意味着图像高度需要来自其中一个CSS样式表。您无法在标记中的图片标记中定义高度。我的解决方案是创建一个类，例如我的样式表中的img200（表示高度为200px），并且制作了这个技巧。
所以在这里再次需要做什么才能使它在Chrome或更好的webkit中工作一般情况下浏览器：
在样式表中为在scrollPane中使用的图像设置图像高度类。
包含您的样式表之前!!!!! javascript for jScrollPane。
将特殊高度类添加到包含到jScrollPane
中的所有图片就是这样。再次感谢您的快速回答。非常酷。

最终解决方案更新!!!!!!!!!

如果您在jScrollPane区域，您必须确保以下内容能够在Chrome或Safari等webkit浏览器中全部显示。否则它会导致高度问题，只有部分内容可见。

这就是你必须做的：

确保你的CSS样式表和jScrollPane JavaScript文件的排列正确。 jScrollPane JavaScript文件需要遵循你的CSS样式表，而不是相反！此外，您还必须为jScrollPane区域中包含的每个图像添加一个高度。你可以通过创建一个css类来做到这一点，或者你可以直接添加维度作为一个属性到你的html标记中的img。

如果你记住它会做到这一点。 您是否也在Safari中测试过？这听起来像是一个在Webkit中出现的问题，当JavaScript包含在文档头部的CSS之前时：
http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

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

希望它有帮助：）

I am using a div with class scroll-pane (height 100%) within an absolute positioned div. The scroll-pane div contains some text first, followed by an image and followed by some text again. The image height is set to 200px. Problem is! If I view the scrollpane in Chrome (latest Version) I sometimes can scroll the complete content and sometimes, after refreshing the site in the browser, not. Not does mean that I can only see a part of the second text and not more. So the actual scrolling height shrinks. If I refresh again I might be able to see it all complete again and so on. It changes every time I refresh the browser. It only happens in Chrome.

Any idea what I can do to avoid that behavior? Thanks.....

UPDATE It really got something to do with how the imports (js and css) are lined up in the header. You are right, the css got to be imported before the jscrollPane js but that also means that the image height need to come from one of the css stylesheets. You can not define the height right within the image tag in your markup. My solution was to create a class, for i.e. img200 (representing a height of 200px) in my stylesheet and that made the trick. So here again what need to be done to make it work in Chrome or better webkit Browsers in general: Set up a image height class in your stylesheet for images that are used within a scrollPane. Include your stylesheet before!!!!! the javascript for jScrollPane. Add the special height class to all pictures you include to a jScrollPane That was it. Thanks again for your fast answer. Very cool.

FINAL SOLUTION UPDATE!!!!!!!!!
If you have pictures within a jScrollPane area you have to make sure the following in order to have it all displayed well in webkit browser, like Chrome or Safari. Otherwise it will cause height problems and only a part of your content will be visible.
This is what you have to do:
Make sure the line up of your css stylesheets and the jScrollPane javascript file is correct. The jScrollPane javascript file need to follow your css stylesheets and not the other way around! Also you have to add a height to each image that is included in the jScrollPane area. You can do this either by creating a css class or you can add the dimension as an attribute directly to the img in your html markup.
If you keep that in mind it will do the trick.

解决方案

Did you also test in Safari? This sounds like an issue that occurs in Webkit when the javascript is included before the CSS in the head of the document: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

If that isn't the cause then it might be something related to the fact that you have an image in your scrollpane. You need to either include the width and height of the image (see http://jscrollpane.kelvinluck.com/image2.html) or autoReinitialise the pane (see http://jscrollpane.kelvinluck.com/image.html).

Hope it helps :)

这篇关于Chrome中的jScrollPane 2.0高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！