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

Question

我正在寻找创建类似于以下网站的滚动功能的资源：
Outpost Journal
Unfold
一旦滚动条到达页面底部，我希望它能够循环回到页面顶部。我熟悉无限滚动的技术，但这不是我想要的。我也找到了可以将相同内容写入/添加到页面底部的脚本，但没有一个可以循环回到页面顶部的脚本。

- Brian Metcalf

---

当页面滚动到底部时，只需将滚动位置设置为0。 - Leeish

Answer 1

试试这个：

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

- mrida

Answer 2

这里有一个解决方案，它会复制主体内容，使得在某个点上可以同时看到顶部和底部，从而使过渡更加平滑。

$('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
         }       
     });

 }); 

- clankill3r

Answer 3

如果您希望实现无限滚动且支持双向滚动，请使用以下代码：

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

我知道回复有点晚，但它仍然可以帮助像我一样只是通过谷歌搜索这些内容的用户。

- Boris

---

你的代码对我不起作用，所以我将这部分 else if ($(window).scrollTop() < 0) 改为 else if ($(window).scrollTop() < 1)。 - Beny

Answer 4

mrida的答案导致我的浏览器无法滚动，这里是一个经过修改并对我有用的版本：

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

- Santiago Angel

Answer 5

从@clankill3r的答案中分叉而来，创建两个body的副本，将其前置和后置到原始body上，这样您就可以在两个方向上无限滚动页面。

$('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); 
         }        
    });
});

- lessisawesome

Answer 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);
     }
 });
});

我水平使用它，效果非常好。希望有人会发现它很有用。

- hiposai

Answer 7

我发表了一个类似的问题：https://stackoverflow.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>

- Allan Kristiansen