Question

我希望在我的新网站上使用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 ，如此

<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的空间。如果您不想要保证金，则只需更改保证金：0 5px 0 0; 至保证金：0; ，删除lastImage类和CSS并删除 +5 <来自JS的和 -5

希望有所帮助！

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

1 个答案: