ホワイトギャップのないテーブルコンテンツを無限にスライドさせる方法は？

Question

私は最初から最後まで白い隙間がないように、下から上へ行を論じるスライドテーブルを作りたいと思っています。

var my_time; 
 
$(document).ready(function() { 
 

 

 

 
    setTimeout(function() { 
 

 

 

 
    }, 200); 
 

 

 

 

 
    pageScroll(); 
 
    $("#contain").mouseover(function() { 
 

 
    clearTimeout(my_time); 
 
    }).mouseout(function() { 
 
    pageScroll(); 
 
    }); 
 
}); 
 

 
function pageScroll() { 
 
    var objDiv = document.getElementById("contain"); 
 
    objDiv.scrollTop = objDiv.scrollTop + 1; 
 
    $('p:nth-of-type(1)').html('scrollTop : ' + objDiv.scrollTop); 
 
    $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight); 
 
    if (objDiv.scrollTop == (objDiv.scrollHeight - 106)) { 
 
    objDiv.scrollTop = -50; 
 
    } 
 
    my_time = setTimeout('pageScroll()', 25); 
 
}

body { 
 
    font-family: 'helvetica'; 
 
} 
 

 
#contain { 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
} 
 

 
#table_scroll { 
 
    width: 100%; 
 
    margin-top: 100px; 
 
    margin-bottom: 100px; 
 
    border-collapse: collapse; 
 
} 
 

 
#table_scroll thead th { 
 
    padding: 10px; 
 
    background-color: #ea922c; 
 
    color: #fff; 
 
} 
 

 
#table_scroll tbody td { 
 
    padding: 10px; 
 
    background-color: #ed3a86; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="CC"> 
 
    <table style="width:100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Phone</th> 
 
     <th>Company</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
    <div id="contain"> 
 
    <table border="0" id="table_scroll"> 
 
     <tbody> 
 
     <tr> 
 
      <td>User One</td> 
 
      <td></td> 
 
      <td>Company1</td> 
 
     </tr> 
 
     <tr> 
 
      <td>User Two</td> 
 
      <td>000550050055</td> 
 
      <td>Company2</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Another User</td> 
 
      <td>22221323123</td> 
 
      <td>Company3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Some more users.............</td> 
 
      <td>......................</td> 
 
      <td>...............</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <p></p> 
 
    <p></p> 
 
</div>

現在その作業罰金が、ギャップがあり、私はそれがボールを回転させるように、底部または上から起動せずに次々になりたいです。

私の質問は明らかです。

ありがとうございます！

Answer 1

別の顧客に別の例を使用しました。たぶん、あなたはそれを使用することができます。

/* 
 
Ininite looping scroll. 
 
Tested and works well in latest verions of Chrome, Safari and Firefox. 
 

 
Not built/tested for mobile. 
 
*/ 
 

 
'use strict'; 
 

 
var doc = window.document, 
 
    context = doc.getElementsByClassName('js-loop')[0], 
 
    clones = context.getElementsByClassName('is-clone'), 
 
    disableScroll, 
 
    scrollHeight, 
 
    scrollPos, 
 
    clonesHeight, 
 
    i; 
 

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

 
function setScrollPos(pos) { 
 
    context.scrollTop = pos; 
 
} 
 

 
function getClonesHeight() { 
 
    clonesHeight = 0; 
 
    i = 0; 
 

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

 
    return clonesHeight; 
 
} 
 

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

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

 
// Calculate variables 
 
window.requestAnimationFrame(reCalc); 
 

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

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

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

 

 

 

 

 
// Just for the demo: Center the middle block on page load 
 
window.onload = function() { 
 
    setScrollPos(Math.round(clones[0].getBoundingClientRect().top + getScrollPos() - (window.innerHeight - clones[0].offsetHeight)/2)); 
 
};

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

 
.Loop { 
 
    position: relative; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
section { 
 
    position: relative; 
 
    text-align: center; 
 
    min-height: 300px; 
 
    max-height: 700px; 
 
    height: 80%; 
 
} 
 
.inner-wrap { 
 
    animation: autoscroll 10s linear infinite; 
 
} 
 

 
@keyframes autoscroll { 
 
    from { transform: translate3d(0,0,0); } 
 
    to { transform: translate3d(0,-75%,0); } 
 
} 
 

 
::scrollbar { 
 
    display: none; 
 
} 
 

 

 

 

 

 

 

 
body { 
 
    font-family: "Avenir Next", Helvetica, sans-serif; 
 
    font-weight: normal; 
 
    font-size: 100%; 
 
} 
 

 
.red { 
 
    background: #FF4136; 
 
} 
 
.green { 
 
    background: #2ECC40; 
 
} 
 
.blue { 
 
    background: #0074D9; 
 
} 
 
.orange { 
 
    background: rebeccapurple; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    width: 100%; 
 
    font-size: 80px; 
 
    letter-spacing: 5px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
}

<main class="Loop js-loop"> 
 
    <div class="inner-wrap"> 
 
    <section class="green"> 
 
     <h1>One</h1> 
 
    </section> 
 
    <section class="red"> 
 
     <h1>For</h1> 
 
    </section> 
 
    <section class="blue"> 
 
     <h1>All</h1> 
 
    </section> 
 
    <section class="orange"> 
 
     <h1>And</h1> 
 
    </section> 
 
    <section class="blue"> 
 
     <h1>All</h1> 
 
    </section> 
 
    <section class="red"> 
 
     <h1>For</h1> 
 
    </section> 
 

 
    <!-- 
 
    These blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height. 
 
    --> 
 
    <section class="green is-clone"> 
 
     <h1>One</h1> 
 
    </section> 
 
    <section class="red is-clone"> 
 
     <h1>For</h1> 
 
    </section> 
 
    </div> 
 
</main>