连续循环页面（非无限滚动）

Posted 2023-03-11

【中文标题】连续循环页面（非无限滚动）

【英文标题】：Continuous Looping Page (Not Infinite Scroll)

【发布时间】：2013-06-04 07:50:42

【问题描述】：

我正在寻找创建滚动功能的资源，就像在这些网站上找到的那样：Outpost JournalUnfold

一旦滚动条到达页面底部，我希望它循环回到顶部。 我对无限卷轴很熟悉，这不是我想要的。我还找到了将相同内容写入/添加到页面底部的脚本，但没有一个脚本会循环回到页面顶部。

【问题讨论】：

只要滚动位置在页面底部时 = 0。

【参考方案1】：

试试这个：

   $('document').ready(function() 
             $(document).scroll(function()
             if(document.documentElement.clientHeight + 
             $(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
             );
          ); 

【参考方案2】：

如果你想在两个方向无限滚动使用

if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) 
    $(document).scrollTop(0)
 else if ($(window).scrollTop() < 0) 
    $(document).scrollTop($(document).height())

（我知道这是一个迟到的回复，但它仍然可以帮助像我这样只是谷歌这样的东西的用户）

【讨论】：

你的代码对我不起作用，所以我把这部分else if ($(window).scrollTop() < 0)改成了else if ($(window).scrollTop() < 1)

【参考方案3】：

这里的解决方案是复制主体，因此可以在某个点同时看到底部和顶部，从而使过渡更加平滑。

$('document').ready(function() 

     // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
     var origDocHeight = document.body.offsetHeight;

     // now we know the height we can duplicate the body    
     $("body").contents().clone().appendTo("body");


     $(document).scroll(function() // detect scrolling

         var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled

         if(scrollWindowPos >= origDocHeight )  // if we scrolled further then the original doc height
             $(document).scrollTop(0); // then scroll to the top
                
     );

 ); 

【参考方案4】：

mrida 的回答是导致我的浏览器无法滚动，这是一个适合我的修改版本：

  $('document').ready(function() 
    $(document).scroll(function()
      if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) 
        $(document).scrollTop(0);
      
    );
  );

【参考方案5】：

从@clankill3r的答案中分叉，创建两个正文副本，添加到原始正文中，然后您可以在两个方向上无限滚动页面。

$('document').ready(function() 

    var origDocHeight = document.body.offsetHeight;

    var clone=$("body").contents().clone();
    clone.appendTo("body");
    clone.prependTo("body");

    $(document).scroll(function() 

        var scrollWindowPos = $(document).scrollTop(); 

        if(scrollWindowPos >= origDocHeight )  
            $(document).scrollTop(0); 
        
        if(scrollWindowPos <= 0 )  
             $(document).scrollTop(origDocHeight); 
                 
    );
);

【参考方案6】：

向后添加循环滚动，升级@clankill3r 答案。应该是这样的。

$('document').ready(function() 

 // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
 var origDocHeight = document.body.offsetHeight;

 // now we know the height we can duplicate the body    
 $("body").contents().clone().appendTo("body");


 $(document).scroll(function() // detect scrolling

     var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled

     if(scrollWindowPos >= origDocHeight )  // if we scrolled further then the original doc height
         $(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top
      else if (scrollWindowPos == 0)  // if we scrolled backwards
         $(document).scrollTop(origDocHeight);
     
 );
);

我正在水平使用它，它工作得很好。希望有人觉得它有用。

【参考方案7】：

发布了类似的问题：https://***.com/a/65953934/7474712，并通过这支笔找到了答案：https://codepen.io/vincentorback/pen/zxRyzj

代码如下：

<style>

html,
body 
  height: 100%;
  overflow: hidden;

  
.infinite 
  overflow: auto;
  -webkit-overflow-scrolling: touch;


.clone 
  height: 50vw;

  
</style>

<script>

    var doc = window.document,
    context = doc.querySelector('.infinite'),
    clones = context.querySelectorAll('.clone'),
    disableScroll = false,
    scrollHeight = 0,
    scrollPos = 0,
    clonesHeight = 0,
    i = 0;

    function getScrollPos () 
      return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
    

    function setScrollPos (pos) 
      context.scrollTop = pos;
    

    function getClonesHeight () 
      clonesHeight = 0;

      for (i = 0; i < clones.length; i += 1) 
        clonesHeight = clonesHeight + clones[i].offsetHeight;
      

      return clonesHeight;
    

    function reCalc () 
      scrollPos = getScrollPos();
      scrollHeight = context.scrollHeight;
      clonesHeight = getClonesHeight();

      if (scrollPos <= 0) 
        setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
      
    

    function scrollUpdate () 
      if (!disableScroll) 
        scrollPos = getScrollPos();

        if (clonesHeight + scrollPos >= scrollHeight) 
          // Scroll to the top when you’ve reached the bottom
          setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
          disableScroll = true;
         else if (scrollPos <= 0) 
          // Scroll to the bottom when you reach the top
          setScrollPos(scrollHeight - clonesHeight);
          disableScroll = true;
        
      

      if (disableScroll) 
        // Disable scroll-jumping for a short time to avoid flickering
        window.setTimeout(function () 
          disableScroll = false;
        , 40);
      
    

    function init () 
      reCalc();

      context.addEventListener('scroll', function () 
        window.requestAnimationFrame(scrollUpdate);
      , false);

      window.addEventListener('resize', function () 
        window.requestAnimationFrame(reCalc);
      , false);
    

    if (document.readyState !== 'loading') 
      init()
     else 
      doc.addEventListener('DOMContentLoaded', init, false)
    

</script>