Question

我目前正在使用smoothdivscroll和混合媒体可变宽度类 - 实际上并没有设置它做的事情（它喜欢所有类都是固定宽度的，但是添加了空白代码似乎工作大多好。

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

http://www.betweenmanandbeast.com/bmb_om

我知道这不是插件本应该做的 - 但是它几乎正常工作（如果每个人都在100mb线上就可以了！），我觉得它只需要一些额外的代码

这是代码的jsfiddle：

另外值得一提的是，当它是一个单一的自动宽度帖子时（例如，如果你点击'博客'），它在加载时都会保持在一行，这意味着它正确计算一个自动宽度类，只是不是当页面上有多个时。初始化代码是：

$("#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）。

所以，这就是关于Smooth Div Scroll如何加载内容的背景。如果您认为可以更有效地或以不同的方式完成此任务，我很乐意听到它，因为宽度计算是我遇到的很多问题。

Answer 2

感谢您亲自回复此问题，以及一个很棒的插件，让我可以做一些我用其他任何东西无法实现的东西！

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

关于插件如何计算宽度;我完全理解它为什么会这样做，我不知道足够的JS能够亲自建议一个解决方案，但是有一些东西 - 例如，是否可以将温度宽度设置为像9999这样的东西，所以虽然插件的宽度总和不会破坏线条吗？

我实际上是通过改变0到9999来尝试这个，但它实际上没有什么区别，也许它需要其他一些改变才能工作？

Answer 3

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

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

您还可以尝试使用overflow：hidden应用于滚动条并使其高到只有一个元素可见。然后，在加载所有内容并计算其宽度之前，元素垂直叠加并不重要。

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

使用smoothdivscroll修复多行加载

3 个答案: