使用平滑滚动修复多行负载

Fixing multi-line load with smoothdivscroll

本文关键字：负载 平滑 滚动      更新时间：2023-09-26

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

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

http://www.betweenmanandbeast.com/bmb_om

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

这是代码的jsfiddle：

http://jsfiddle.net/wnD3r

另外值得一提的是，当它是一个单独的自动宽度帖子时（例如，如果您单击"博客"），它在加载时都停留在一行上，这意味着它使用一个自动宽度类正确计算，只是当页面上有多个时。初始化代码为：

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

有什么想法吗？

提前非常感谢！

我不是 100% 确定我理解这个问题，但平滑div 滚动需要知道滚动器中每个元素的宽度才能设置可滚动区域的总宽度。它通过迭代滚动器内的所有元素，将每个元素的宽度添加到所有元素的组合宽度来实现此目的。

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

但问题是许多用户没有为其内容设置宽度，有时他们无法指定宽度，因为内容是动态的或以某种方式通过 AJAX 加载，因此事先不知道元素的宽度。因此，平滑div 滚动会等到内容加载完毕（发生在 $（window）.load 上），然后再尝试计算可滚动区域内所有元素的总宽度。

所以，这就是今天如何平滑div 滚动加载内容的背景。如果您认为其中有任何可以更有效或以不同方式完成的事情，我很想听听，因为宽度计算是我有很多问题的事情。

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

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

就插件如何计算宽度而言;我完全理解为什么它以这种方式工作，而且我不知道足够的 JS 来亲自提出解决方案，但是有几件事 - 例如，是否可以将临时宽度设置为 9999 之类的东西，所以当插件将宽度总计时，内容不会中断行？

我实际上通过从 0 - 9999 更改来尝试这个，但它实际上并没有产生任何影响，也许它需要其他更改才能工作？

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

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

您也可以尝试将溢出：隐藏应用于滚动条，并使其高度高到只有一个元素可见。那么，在加载所有内容并计算其宽度之前，元素垂直堆叠就无关紧要了。

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

相关文章：