jQuery jscrollpane宽度根据内容自动调整 [英] Jquery jscrollpane width to adjust automatically according to content
问题描述
我正在寻找在新网站上使用jScrollPane的方法，并且遇到一些疑难解答问题.上下搜索答案，但找不到答案.
I am looking to use jScrollPane on my new website and am having some troubleshooting problems with it. Searched up and down for answers but couldn't find any.
请在此处查看该网站: http://www.giamarescotti.com/v2
Please take a look at the website here: http://www.giamarescotti.com/v2
我不想为.scroll-pane指定一个确定的宽度，而是希望它根据内容扩展，因为当我定期更新网站时，我无法继续重新计算宽度.
Instead of specifying a definite width to .scroll-pane, I would like it to expand according to the content because it's impossible for me to keep recalculating the width as I update my website regularly.
*由于是新用户，所以我无法发布图像和代码.请在网站上查看源文件.
*Due to being a new user, I am unable to post images and codes. Please view the source file at the website.
感谢您的帮助.非常感谢你！
Any help is appreciated. Thank you very much!
关于， 戴夫
推荐答案
我认为这可能是您想要的.此处的演示向您展示了如果容器中的内容发生更改，如何自动重新初始化容器的宽度.
I think this could be what you are looking for. The demo here shows you how to autoReinitialise the width of a container if the content inside of it changes.
http://jscrollpane.kelvinluck.com/dynamic_content.html
或者如果您将容器的宽度设置为百分比，请看一下这个演示
Or if you are setting the width of the container as a percentage, take a look at this demo
http://jscrollpane.kelvinluck.com/dynamic_width.html
尝试用下面的代码替换当前的jScrollPane JS
Try replacing your current jScrollPane JS with the code below
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
希望有帮助
更新:
嗯，我现在没有太多时间，但是您可以使用一个非常简单的jQuery来为您计算宽度...
Hmmmmm I don't have much time right now, but you could do a really simple bit of jQuery to calculate the width for you...
然后从图像周围删除 p 标记，并替换为 div 标记，该标记的ID可以参考上述JS. (顺便说一句， p 标签是段落标签，用于文本！)
Then remove the p tag from around your images and replace it with a div tag that has an ID that refers back to the above JS. (By the way a p tag is a Paragraph tag, for text!)
最后在CSS中设置一个后退宽度，以使没有JS的人看不到页面上出现大量图像.
Lastly set a fall back width in your CSS so that people without JS don't see loads of images going down the page.
真正应该找到仅使用CSS的更好的修复程序，如果时间允许，我会稍后调查！
A better fix that uses only CSS should really be found, I'll look into later if I get time!
第二次更新
好的，让我们将最终细节的1-3％整理出来:)
Right, lets sort that 1-3% of final details out :)
5的边距只是一个粗略的参考，因为浏览器本身正在为图像添加边距/填充.让我们为每张图片加上最后一张的固定5px边距.
The margin of 5 was just a rough guide as the browsers themselves are adding a margin/padding to your images. Let's add a fixed 5px margin to each image apart from the last one.
您的JS基本相同，只是您需要从计算出的总宽度中减去-5，因为我们将从上一张图像中删除5px的空白.
Your JS would be mostly the same, except that you will need to -5 from the calculated total width because we will be removing the 5px margin from the last image.
var totalImages = $("#images img").length;
var imgWidth = 452 + 5; //width of an image plus the margin
$("#imagesContainer").css("width",totalImages*imgWidth - 5);
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
接下来，我们将像这样给列表中的最后一张图像提供一个类，称为 lastImage
Next we will give a class to your last image in the list called lastImage like so
<div id="imagesContainer">
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img class="lastImage" src="images/food.jpg" />
</div>
现在使用CSS
#imagesContainer {
width:5000px; /*fallback width*/
overflow:hidden;
}
#imagesContainer img {
display:block;
margin:0 5px 0 0; /*adding a 5px margin to the right*/
padding:0;
float:left;
}
.lastImage {
margin-right:0 !important; /*removing the margin right from the last img*/
}
现在每个图像之间有5px的间距.如果您不想要任何余量，则只需将 margin:0 5px 0 0; 更改为 margin:0; ，删除lastImage类和CSS并删除 +5 和 -5 来自JS！
Now each image has a 5px space between it. IF you wanted no margin then just change margin:0 5px 0 0; to margin:0;, remove the lastImage class and CSS and remove the +5 and -5 from the JS!
希望有帮助！
这篇关于jQuery jscrollpane宽度根据内容自动调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
