如何制作圆形页面? (当滚动到页面内容的末尾时,页面将内容的开头添加到底部等等)

Posted

技术标签:

【中文标题】如何制作圆形页面? (当滚动到页面内容的末尾时,页面将内容的开头添加到底部等等)【英文标题】:How can I make a circular page? (when scrolled to the end of page content, page adds the beginning of conten to the bottom and so forth) 【发布时间】:2020-04-28 05:29:27 【问题描述】:

我目前正在制作一个作品集,其中我有使用循环讲故事的漫画书 - 这意味着故事总是会重复。它结束的地方从新开始。 我知道垂直滚动是如何工作的,但现在我希望让页面无限滚动,因为你可以一遍又一遍地阅读漫画。理想情况下,这可以无缝地工作(不会在页面内跳来跳去)。

有人能指出我如何使用 html 和 CSS 来实现这一点,或者如果需要也使用 javascript 吗?

非常感谢。

【问题讨论】:

欢迎 AMOFFICIAL!我们总是喜欢在解决问题之前看到一些努力。你有什么想法来实现这个目标?到目前为止,您尝试过什么? 作品集中重复漫画的结构是什么;一部漫画是在您创建和滚动浏览的页面上使用多个图像/框架,还是只使用一张包含整个漫画的大图像?你有一个带有漫画的页面的 html 示例吗? jsfiddle.net/howderek/N9PWn 也许你可以从这里拿点东西。 :-? 这个问题要么过于宽泛,要么基于观点,要么需要讨论,因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题,请提供完整的详细信息。 @MaraBlack 这可能是什么东西!非常感谢您的建议! 【参考方案1】:

这实际上是我正在寻找的东西:

http://jsfiddle.net/howderek/N9PWn

谢谢你,玛拉

window.verticalScroller = function($elem) 
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if(top < temp) 
    top = $('#verticalScroller').height()
    $elem.css("top", top);

$elem.animate( top: (parseInt(top)-60) , 600, 'linear', function () 
  window.verticalScroller($(this))
);


$(document).ready(function() 
var i = 0;
$("#verticalScroller > div").each(function () 
      $(this).css("top", i);
      i += 60;
      window.verticalScroller($(this));
););

【讨论】:

以上是关于如何制作圆形页面? (当滚动到页面内容的末尾时,页面将内容的开头添加到底部等等)的主要内容,如果未能解决你的问题,请参考以下文章

如何使用硒滚动到页面末尾? [复制]

UIPageViewController 索引无法正常工作

Selenium:在动态加载网页中滚动到页面末尾

当用户到达页面末尾以加载新内容时,如何调用 JavaScript (AJAX) 函数?

如何将页脚固定在页面底部

如何将其他文本附加到 UIWebView