smoothdivscroll - 仅在点击时滚动答案

【问题标题】：smoothdivscroll - only scroll on clicksmoothdivscroll - 仅在点击时滚动
【发布时间】：2013-07-31 19:31:05
【问题描述】：

我正在使用 smootdivscroll 在网站上显示产品。产品全部加载到一个大 div 中，然后使用 smootdivscroll 脚本左右滚动。我在左右两侧设置了在悬停或单击时滚动的箭头。

我想禁用鼠标悬停滚动，只允许在单击箭头时滚动。

Actual page

Smoothdiv scroll demo page

问候。

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

我认为它没有内置该功能。但是您可能可以使用这个公共方法：http://www.smoothdivscroll.com/publicMethods.html#move

在选项中禁用hotSpotScrolling，并将一些点击事件监听器绑定到那些将触发move()方法的箭头。

【讨论】：

这是一个更好的主意，但失去了插件的一些优点。
@Fresheyeball 确实如此，但要么就是对源代码进行猴子修补，要么将这些 mouseover/mouseout 侦听器转换为 mousedown/mouseup。无论哪种方式都不会很优雅，但应该可以。

【解决方案2】：

在阅读了这方面的文档后，如果不破解插件是不可能的。热点监听悬停和点击，你不能在没有另一个的情况下禁用一个。

如果您选择（不建议）破解，这里是https://github.com/tkahn/Smooth-Div-Scroll/blob/master/js/jquery.smoothDivScroll-1.3.js#L195

您需要删除除mousedown 和mouseup 之外的所有侦听器。

【讨论】：

不幸的是，这只是通过单击和悬停来禁用滚动。

【解决方案3】：

感谢您的帮助和想法，以下是我的解决方案。

首先禁用热点和热点滚动：

visibleHotSpotBackgrounds: "",
hotSpotScrolling: false

我创建了两个链接，后期更新为控制滚动的箭头图像：

<a title="Scroll Left" href="#" onclick="MoveLeft();return false;">LEFT</a>
<a title="Scroll Right" href="#" onclick="MoveRight();return false;">RIGHT</a>

使用两个简单的函数将滚动前进+- 200px

<script type="text/javascript">
    function MoveRight() {
        $("#makeMeScrollable").smoothDivScroll("move", 200);
    }
    function MoveLeft() {
        $("#makeMeScrollable").smoothDivScroll("move", -200);
    }
</script>

平滑滚动效果集：

easingAfterMouseWheelScrolling: true

【讨论】：