循环动态可滚动元素两个方向（向上和向下）

Question

有很多解决方案可以循环整个页面，但是我很难将它们调整到具有固定高度的特定元素。这就是我所拥有的：

    var el = this;
    var originalHeight = el.children().first().outerHeight() * el.children().length;
    var dup = el.contents().clone();
    el.append(dup);

    el.scroll(function(){

        var scrollPosition = el.scrollTop();

        if( scrollPosition >= originalHeight ) {
            el.scrollTop(0);
        }
    });

};

上述功能非常适合向下滚动。一旦我添加else语句，事情就会变坏。循环不仅不能很好地工作，而且会导致循环向下跳跃。

if( scrollPosition >= originalHeight ) {
    el.scrollTop(0);
} else if (scrollPosition < x) {
    el.scrollTop(y)
}

我为x和y尝试了各种各样的东西而没有运气。再次，它在技术上＆＃34;工作＆＃34;但它跳了很多。我需要这个来跟踪和顺利。

想法？

演示行为的代码段：

＆＃13;

＆＃13;

(function ( $ ) {

	$.fn.endless = function( options ) {
		var el = this;
		var originalHeight = el.children().first().outerHeight() * el.children().length;
		var dup = el.contents().clone();
		el.append(dup);

		el.scroll(function(){

			var scrollPosition = el.scrollTop();

			if( scrollPosition >= originalHeight ) {
				el.scrollTop(0);
			} else if (scrollPosition < 1) {
				el.scrollTop(el.outerHeight())
			}
		});

	};

}( jQuery ));

$('#mainmenu').endless();

＆＃13;

.rmenu {
	position: absolute;
	left: 50%;
	min-width: 50px;
	height: 200px;
	overflow-y: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainmenu" class="rmenu">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
		</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这似乎运作良好。它比我预期的更复杂，所以也许有人可以发布一个更简单的解决方案。

＆＃13;

＆＃13;

(function ( $ ) {
    
    	$.fn.endless = function( options ) {
    		var el = this;
    		var originalHeight = el.children().first().outerHeight() * el.children().length;
    		var $before = $("<span>", {id: "endless-before"});
    		var $after = $("<span>", {id: "endless-after"});
    		$before.append(el.contents().clone());
    		$after.append(el.contents().clone());
    		el.children().wrapAll($('<span>', {id: 'endless-original'}));
    		el.prepend($before);
    		el.append($after);
    		var newHeight = el.children().first().outerHeight() * el.children().length;
    		var beforeTop = $('#endless-before').offset().top;
    		var originalTop = $('#endless-original').offset().top;
    		var afterTop = $('#endless-after').offset().top;
    		el.scrollTop(originalTop + 1);
    
    		el.scroll(function(){
    			var scrollPosition = el.scrollTop();
    
    			if(scrollPosition > afterTop) {
    				el.scrollTop(originalTop);
    				console.log("Looping up");
    			} else if (scrollPosition < originalTop) {
    				el.scrollTop(afterTop);
    				console.log("Looping down");
    			}
    		});
    
    	};
    
    }( jQuery ));
    
$('#mainmenu').endless();

＆＃13;

body { overflow: hidden; }
.rmenu {
	position: absolute;
	right: -30px;
	min-width: 150px;
	height: 200px;
	overflow-y: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainmenu" class="rmenu">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
		</div>

＆＃13;

＆＃13;

＆＃13;