繁体   English   中英

无限水平滚动分区

[英]Infinite Horizontal Scrolling Div

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

我发现Smooth Div Scroll插件(http://www.smoothdivscroll.com/)非常接近我所需要的。 但是,这有几个问题。

  1. 我需要能够使滚动元素从设定位置开始(即左:-340px)。 此插件仅允许您设置起始元素,而不是实际位置。

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

如果有人能帮助我找到这些项目的解决方案或者至少指出我正确的方向,我将非常感激。

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

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

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

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

如何进行无限滚动<div> ?</div><div id="text_translate"><p> 我试图让这个带有列的 div 无限向下移动 -<a href="https://i.stack.imgur.com/Gjswj.png" rel="nofollow noreferrer">示例</a>,就像在这个谷歌开发者页面上 - <a href="https://developers.google.com/web/updates/2016/07/infinite-scroller" rel="nofollow noreferrer">谷歌开发者</a>|| <a href="https://i.stack.imgur.com/MssUX.png" rel="nofollow noreferrer">无限滚动图像</a>,但如您所见,不成功。 因此,我将&lt;div&gt;称为“imgs”,其中包含一些图像,并且当某些 position 中的“imgs”时,来自 div 底部的图像被移动到顶部,但用户不应该看到它们移动。 以下是我的一些作品: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> let imgsContainer = document.getElementById("imgs"); let imgAppear = document.getElementById("imgAppear"); function imgsContainerMove() { let top = 0; setInterval(imgsContainerMoving, 25); function imgsContainerMoving() { // Animation top++; imgsContainer.style.top = top + '%'; if (top === 100) top = 0; //Top reset if (imgsContainer.style.top == "1%") { Array.from(document.querySelectorAll("div.imgs &gt; img")).slice(-6).forEach((image) =&gt; imgAppear.prepend(image)) //Adding images to the top } } } imgsContainerMove(); // execute function</pre><pre class="snippet-code-css lang-css prettyprint-override"> body{ margin: 0; }.gallery-block { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; background-color: #2B3C35; }.gallery-bg { position: relative; margin: 50px 0; padding: 0 10px; width: 100%; height: 40vh; overflow: hidden; display: flex; justify-content: center; }.gallery-bg.overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: auto; background: rgb(43, 60, 53); background: -moz-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: -webkit-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); }.imgs { position: absolute; width: 75vw; columns: 200px; column-gap: 15px; }.imgs img { width: 100%; margin-bottom: 15px; border-radius: 5px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="gallery-block"&gt; &lt;h2&gt;Gallery&lt;/h2&gt; &lt;img src="img/triangle.png" alt="" class="triang"&gt; &lt;div class="gallery-bg"&gt; &lt;div class="imgs" id="imgs"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;/div&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>

[英]How to make infinite scrolling <div>?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS无限滚动div 无限滚动div 通过javascript的div的水平滚动 水平滚动分区 无限滚动div出现图像故障 如何进行无限滚动<div> ?</div><div id="text_translate"><p> 我试图让这个带有列的 div 无限向下移动 -<a href="https://i.stack.imgur.com/Gjswj.png" rel="nofollow noreferrer">示例</a>,就像在这个谷歌开发者页面上 - <a href="https://developers.google.com/web/updates/2016/07/infinite-scroller" rel="nofollow noreferrer">谷歌开发者</a>|| <a href="https://i.stack.imgur.com/MssUX.png" rel="nofollow noreferrer">无限滚动图像</a>,但如您所见,不成功。 因此,我将&lt;div&gt;称为“imgs”,其中包含一些图像,并且当某些 position 中的“imgs”时,来自 div 底部的图像被移动到顶部,但用户不应该看到它们移动。 以下是我的一些作品: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> let imgsContainer = document.getElementById("imgs"); let imgAppear = document.getElementById("imgAppear"); function imgsContainerMove() { let top = 0; setInterval(imgsContainerMoving, 25); function imgsContainerMoving() { // Animation top++; imgsContainer.style.top = top + '%'; if (top === 100) top = 0; //Top reset if (imgsContainer.style.top == "1%") { Array.from(document.querySelectorAll("div.imgs &gt; img")).slice(-6).forEach((image) =&gt; imgAppear.prepend(image)) //Adding images to the top } } } imgsContainerMove(); // execute function</pre><pre class="snippet-code-css lang-css prettyprint-override"> body{ margin: 0; }.gallery-block { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; background-color: #2B3C35; }.gallery-bg { position: relative; margin: 50px 0; padding: 0 10px; width: 100%; height: 40vh; overflow: hidden; display: flex; justify-content: center; }.gallery-bg.overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: auto; background: rgb(43, 60, 53); background: -moz-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: -webkit-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); }.imgs { position: absolute; width: 75vw; columns: 200px; column-gap: 15px; }.imgs img { width: 100%; margin-bottom: 15px; border-radius: 5px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="gallery-block"&gt; &lt;h2&gt;Gallery&lt;/h2&gt; &lt;img src="img/triangle.png" alt="" class="triang"&gt; &lt;div class="gallery-bg"&gt; &lt;div class="imgs" id="imgs"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;/div&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div> 无限水平滚动图像循环,不起作用 水平滚动与粘性div元素 div的水平滚动不适用于scrollLeft 调整水平滚动div到内容
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM