loops - 連続ループページ (無限スクロールではない)

Question

これらのサイトにあるようなスクロール機能を作成するリソースを探しています:
Outpost Journal
Unfold

スクロール バーがページの下部に到達したら、ページの上部にループ バックするようにします。私は無限スクロールに慣れていますが、これは私が望んでいるものではありません。ページの下部に同じコンテンツを書き込み/追加するスクリプトも見つけましたが、ページの上部にループバックするスクリプトはありません。

Answer 1

これを試して：

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

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

 }); 

Answer 3

両方向に無限にスクロールしたい場合は、

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

（返信が遅いことはわかっていますが、このようなことをグーグルで検索する私のようなユーザーにはまだ役立ちます）

Answer 4

ループスクロールを後方に追加し、@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);
     }
 });
});

横置きで使用していますが、問題なく使えています。誰かが役に立つことを願っています。

Answer 5

同様の質問を投稿しました: 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>