javascript - 如何使表格内容无限滑动而没有空白？

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>0123456789</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>