无限水平滚动分区 [英] Infinite Horizontal Scrolling Div

问题描述

当你将鼠标移动到div的右边或左边时，我需要有一个水平滚动的div。

I need to have a div that will scroll horizontally as you move your mouse further to the right or the left of the div.

我找到了Smooth Div Scroll插件（http://www.smoothdivscroll.com/）非常接近我的需求。但是，这有几个问题。

I found the Smooth Div Scroll plugin (http://www.smoothdivscroll.com/) that is really close to what I need. However, there are a couple problems with this.

1. 我需要能够使滚动元素从设定的位置开始（即左：-340px）。这个插件只允许你设置起始元素，而不是实际位置。

1. I need to be able to make the scrolling element start at a set position (i.e. left:-340px). This plugin only allows you to be able to set a starting element, not an actual position.

我需要滚动元素是无限的。所以，如果我向右滚动，当它到达结尾时，它应该继续向右，并从头开始重复元素。

I need the scrolling element to be infinite. So, if I'm scrolling to the right, when it gets to the end, it should keep going to the right and repeat the element from the beginning.

如果有人可以帮我找到这些项目的解决方案，或者至少指出我正确的方向，我会非常感激。

If someone could help me find a solution for these items or at least point me in the right direction, I would be very appreciative.

推荐答案

1. 基本上你可以将 autoScrollDirection 选项设置为 endlessloopright ，它会不断自动滚动到右边;但是当您尝试手动滚动窗口时，它会在结束时停止。我认为需要修改插件代码才能使手动滚动连续滚动。

1. Basically you can set the autoScrollDirection option to endlessloopright and it will continuously auto scroll to the right; but when you try to manually scroll the window, it stops at the end. I believe it would require modifying the plugin code to make the manual scroll do scroll continuously.

您可以使用插件设置更改滚动条的位置API。试试这个：

You can set the change the position of the scroller by using the plugin's API. Try this:

// Do not include "px" and this number should be positive
var position = "400";
$('#makeMeScrollable')
  .data('startingPosition', position)
  .data('scrollXPos', position)
  .smoothDivScroll('recalculateScrollableArea');

这是一个演示以显示它的实际效果。但是有一个问题，如果您使用上面的 enlessloopright 选项，每次调用此函数时位置都会更改，因为内容已重新排列。

Here is a demo to show it in action. One problem though, if you use the enlessloopright option above, the position changes each time you call this function because the content is rearranged.

这篇关于无限水平滚动分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！