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

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 标签是文本的段落标签!)

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

确实应该找到一个仅使用 CSS 的更好修复方法，如果有时间我会稍后研究!

第二次更新

好吧，让我们整理出最终细节的 1-3% :)

5 的边距只是一个粗略的指导，因为浏览器本身会向图像添加边距/填充。让我们为除最后一张图像之外的每张图像添加固定的 5 像素边距。

您的 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 的空间。如果您不需要边距，只需将 margin:0 5px 0 0; 更改为 margin:0;，删除 lastImage 类和 CSS 并删除 +5 和 -5 来自 JS!

希望有帮助!