[英]Infinite Horizontal Scrolling 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. 当你将鼠标移动到div的右边或左边时,我需要有一个水平滚动的div。
I found the Smooth Div Scroll plugin (http://www.smoothdivscroll.com/) that is really close to what I need. 我发现Smooth Div Scroll插件(http://www.smoothdivscroll.com/)非常接近我所需要的。 However, there are a couple problems with this.
但是,这有几个问题。
I need to be able to make the scrolling element start at a set position (ie left:-340px). 我需要能够使滚动元素从设定位置开始(即左:-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. 如果有人能帮助我找到这些项目的解决方案或者至少指出我正确的方向,我将非常感激。
Basically you can set the autoScrollDirection
option to endlessloopright
and it will continuously auto scroll to the right; 基本上你可以设置
autoScrollDirection
选项endlessloopright
,它会不断地自动滚动到的权利; 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.
我相信它需要修改插件代码才能使手动滚动连续滚动。
You can set the change the position of the scroller by using the plugin's API. 您可以使用插件的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');
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. 但是有一个问题,如果您使用上面的
enlessloopright
选项,每次调用此函数时位置都会更改,因为内容已重新排列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.