Smooth Div Scroll - 鼠标关闭时向右滚动重置答案

【问题标题】：Smooth Div Scroll - Scroll Right resets on mouse offSmooth Div Scroll - 鼠标关闭时向右滚动重置
【发布时间】：2012-03-26 13:42:34
【问题描述】：

我在使用 jquery 插件 smoothdivscroll 时遇到了一些问题。

基本上，我正在尝试让插件作为此页面运行：http://www.smoothdivscroll.com/demo.html

但是，我更改了 javascript，因为它需要自动滚动，但允许热点也能正常工作，但鼠标离开热点时恢复为自动滚动。

虽然下面的代码有效，但在您将触发器留在右侧后，它会“重置”回第一个 div。

有没有办法设置它从设置的位置恢复滚动？

代码：

    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // I just set some of the options
        $("div#makeMeScrollable").smoothDivScroll({
        mousewheelScrolling: true,
        visibleHotSpotBackgrounds: "always",
        autoScrollingMode: "endlessright"
        });


    });
    //This is just to make the scroller pause...
    $("#makeMeScrollable").bind("mouseover", function() {
    $(this).smoothDivScroll("stopAutoScrolling");
    }).bind("mouseout", function() {
    $(this).smoothDivScroll("startAutoScrolling");
});

【问题讨论】：

标签： jquery html scroll smooth smooth-scrolling

【解决方案1】：

我不知道这是否是导致您出现问题的原因，但您需要注意括号。把代码改成这样：

// jQuery document ready
$(document).ready(function () {
  // Initialize the scroller
  $("#makeMeScrollable").smoothDivScroll({
    mousewheelScrolling: true,
    visibleHotSpotBackgrounds: "always",
    autoScrollingMode: "endlessright"
  });

  //This is just to make the scroller pause...
  $("#makeMeScrollable").bind("mouseover", function() {
    $(this).smoothDivScroll("stopAutoScrolling");
    }).bind("mouseout", function() {
    $(this).smoothDivScroll("startAutoScrolling");
  });
}); // End query document ready

我没有测试过这段代码，但除非我打错了，否则这是正确的做法。

祝你好运！

【讨论】：

谢谢，再次重置到第一个 div 仍然很疯狂。但整洁的语法总是好的。
我很想看看这个，以防这是一个必须解决的错误。你有测试页面的 URL 吗？
vettacreative.co.uk/scroll 如果您同时使用左侧和右侧的热点，您就会明白我的意思。谢谢
是的 - 我可以重现这种行为，不仅在 IE (7,8,9) 中，而且在最新版本的 Chrome 中。所以当你以这种方式结合自动滚动和手动滚动时，会发生一些奇怪的事情。
这就是我的意思，难道不是要两者兼得吗？

【解决方案2】：

我看到选项不对。试试这个（如果您使用的是最新版本，即 1.2 版）：

  // Initialize the scroller
  $("#makeMeScrollable").smoothDivScroll({
    mousewheelScrolling: true,
    visibleHotSpotBackgrounds: "always",
    autoScrollingMode: "onstart",
    autoScrollingDirection: "endlessloopright",
    manualContinuousScrolling: true
  });

在此配置中，滚动条将在加载时自动滚动到一个无循环的循环中。一旦用户使用鼠标滚轮或热点，自动滚动将停止，如果不是您的自定义事件处理程序，它将不会再次开始自动滚动。但既然你有它们，它应该在用户离开可缩放区域后立即重新开始。

我还将 manualContinuousScrolling 设置为 true，以便在手动滚动时获得相同的无限循环。

这尚未经过测试，因此您可能需要进行一些调整。例如，我不确定 autoScrollingMode: "onstart" 或 autoScrollingMode: "always" 是否是最佳选择。你只需要尝试一下。

【讨论】：

【解决方案3】：

我相信也许不同的版本会影响行为也很重要。这适用于我的：jquery.smoothDivScroll-1.1-min.js 版本。

注意函数名称的区别：stopAutoScroll 与 stopAutoScrolling 等。

$(window).load(function() {
    $("#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "always", 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 25, 
        startAtElementId: "startAtMe"
    });

    //This is just to make the scroller pause...
    $("#makeMeScrollable").bind("mouseover", function() {
        $(this).smoothDivScroll("stopAutoScroll");
        }).bind("mouseout", function() {
        $(this).smoothDivScroll("startAutoScroll");
    });
});

【讨论】：