使用smoothdivscroll修复多行负载

Question

我目前正在将Smoothdivscroll与混合媒体可变宽度类结合使用-实际上并未设置要执行的操作（它喜欢将所有类都设置为固定宽度，但是添加空白代码似乎可以正常工作。

我遇到的问题是，当页面加载内容时，它会将div垂直放置在彼此之上，然后在加载所有内容时正确显示它们。 参见以下示例：

http://www.betweenmanandbeast.com/bmb_om

我知道这不是插件应该做的事情-但它几乎可以正常工作（如果每个人都在100mb行上，那太好了！），我感觉到它只需要在某个地方添加一些额外的代码即可。

这是代码的jsfiddle：

http://jsfiddle.net/wnD3r

还值得一提的是，当它是单个自动宽度的帖子（例如，如果您单击“博客”）时，它们在加载时都停留在一行上，这意味着它可以正确地使用一个自动宽度类进行计算，而不是在在页面上有多个。 用于初始化的代码是：

$("#content").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    hiddenOnStart: false
    });

有任何想法吗？

预先感谢！

Answer 1

我不确定是否100％理解问题，但是Smooth Div Scroll需要知道滚动条中每个元素的宽度才能设置可滚动区域的总宽度。 它通过迭代滚动器中的所有元素，并将每个元素的宽度添加到所有元素的组合宽度中来实现。

如果您总是在标记中设置固定的元素宽度（在CSS中指定，甚至在HTML标签上指定为属性，就像对图像一样），Smooth Div Scroll会毫无问题地计算所有元素的总宽度加载滚动条的实际内容之前。 这意味着我可以在jQuery事件$（document）.ready中设置可滚动区域的总宽度。

但是问题在于，许多用户没有为其内容设置宽度，有时他们不能指定宽度，因为内容是动态的或通过AJAX加载的，因此元素的宽度事先未知。 因此，Smooth Div Scroll会等到内容加载完毕（在$（window）.load上）之后，才尝试计算可滚动区域内所有元素的总宽度。

因此，这就是今天“平滑Div滚动”如何加载内容的背景。 如果您认为有什么办法可以更有效地完成或以其他方式完成，那么我很想听听，因为宽度计算是我遇到的许多问题。

Answer 2

感谢您亲自回答此问题，并感谢一个出色的插件，该插件使我能够做其他事情无法实现的事情！

为了进一步描述问题-单击第一个链接时，是否看到多行加载（在加载所有内容之前）？ 如果没有，我可以尝试建立另一个示例。

关于插件如何计算宽度； 我完全理解为什么它会以这种方式起作用，并且我不了解足够的JS来亲自提出解决方案，但是有两件事-例如，是否可以将临时宽度设置为像9999之类的东西，因此，当插件总计宽度时，内容不会中断吗？

我实际上是通过将0更改为9999来尝试的，但实际上并没有什么不同，也许还需要其他更改才能起作用？

Answer 3

您应该能够将可滚动区域的宽度设置为CSS中的任何宽度，然后当计算所有元素的总宽度时，将由指定宽度的内联样式属性覆盖它。 像这样：

div.scrollableArea
{
    position: relative;
    width: 9999px;
    height: 100%;
}

您也可以尝试将overflow：hidden应用于滚动条，并将其设置得很高，以至于只有一个元素可见。 然后，在所有内容加载完毕并计算其宽度之前，垂直堆叠这些元素都没关系。

当然，这些只是建议-我自己还没有尝试过。