Jquery jscrollpane宽度根据内容自动调整

我希望在我的新网站上使用jScrollPane并且遇到一些故障排除问题。 搜索上下寻找答案，但找不到任何答案。

请访问以下网站： http ： //www.giamarescotti.com/v2

我没有为.scroll-pane指定明确的宽度，而是希望它根据内容进行扩展，因为我不可能在定期更新我的网站时不断重新计算宽度。

*由于是新用户，我无法发布图片和代码。 请在网站上查看源文件。

任何帮助表示赞赏。 非常感谢你！

问候，戴夫

Answer 1

我想这可能就是你要找的东西。 此处的演示向您展示了如果容器内部的内容发生更改，如何自动重新初始化容器的宽度。

http://jscrollpane.kelvinluck.com/dynamic_content.html

或者，如果您将容器的宽度设置为百分比，请查看此演示

http://jscrollpane.kelvinluck.com/dynamic_width.html

尝试使用下面的代码替换当前的jScrollPane JS

$('.scroll-pane').jScrollPane({ showArrows: true, autoReinitialise: true }); 

希望有所帮助

更新：

嗯，我现在没有太多时间，但你可以做一个非常简单的jQuery来为你计算宽度……

然后从图像周围删除p标签，并将其替换为具有引用回上述JS的ID的div标签。 （顺便说一句， p标签是Paragraph标签，用于文本！）

最后在CSS中设置一个后退宽度，这样没有JS的人就不会在页面上看到大量的图像。

应该找到一个只使用CSS的更好的修复方法，如果我有时间，我会稍后调查一下！

第二次更新

是的，让我们排出1-3％的最终细节:)

由于浏览器本身正在为图像添加边距/填充，因此5的边距只是一个粗略的指导。 让我们为每个图像添加一个固定的5px边距，而不是最后一个。

你的JS大致是相同的，除了你需要从计算的总宽度到-5，因为我们将从最后一个图像中删除5px边距。

 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的列表中的最后一个图像提供一个类，如此

现在的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的空间。 如果你不想要保证金那么只需改变保证金：0 5px 0 0; 到保证金：0; ，删除lastImage类和CSS并从JS中删除+5和-5 ！

希望有所帮助！