Question

我有一个数据的HTML表格结构，我可以用一些javascript循环到一个垂直列表中，但我无法弄清楚如何使它成为一个平滑的恒定垂直滚动，现在它变为1当行到达顶部并附加到自身时为1。即使将setInterval设置为0，它也会有一个简短的烦人暂停。另外，我的10个片段有时似乎不会将列表保持为10，不确定这是我的JavaScript还是浏览器问题。

JS

$.fn.infiniteScrollUp=function(){
    var self=this,kids=self.children()
    kids.slice(10).hide()
    setInterval(function(){
        kids.filter(':hidden').eq(0).slideDown()
        kids.eq(0).slideUp(function(){
            $(this).appendTo(self)
            kids=self.children()
        })
    },1)
    return this
}


$(function(){
    $('section').infiniteScrollUp()
})

HTML

<table>
  <thead>
    <div>
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
    </div>
  </thead>
  <section>
    <div><span>a</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>b</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>c</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>d</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>e</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>f</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>g</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>h</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>i</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>j</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>k</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>l</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>m</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>n</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>o</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>p</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>q</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>r</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>s</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>t</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>u</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>v</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>w</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>x</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>y</span><span>2</span><span>3</span><span>4</span></div>
    <div><span>z</span><span>2</span><span>3</span><span>4</span></div>
  </section>
</table>

这是JSFiddle

Answer 1

https://jsfiddle.net/pfpyc68e/1/

var self=this,kids=self.children()
setInterval(function(){
        kids.slice(10).hide()
    kids.filter(':hidden').eq(0).slideDown()
    kids.eq(0).slideUp(800, "linear",function(){
        $(this).appendTo(self)
        kids=self.children()
    })
},1)

在slideUp上添加了800毫秒计时器，然后将切片移动到间隔内。至少切片的移动是你需要的。我不确定这是否是你想要的正确的滑动动作......

无限循环平滑垂直Javascript

1 个答案: