无限可滚动div?

时间:2018-04-28 09:23:03

标签: javascript jquery html css

我希望得到一个包含多个项目的div元素。



#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

#parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.child {
  display: inline-block;
  border-radius: 100%;
  font-family: Arial;
  position: relative;
  margin-left: 3%;
  width: 50px;
  height: 50px;
  background: white;
}

<div id="container">
  <div id="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
  </div>
</div>
&#13;
&#13;
&#13;

所以css-styling到目前为止工作得很好 - 但我想让parent - 元素可滚动无限 - 以便child-elements是善良的重复自己。

总结一下:在你向右滚动之后,你就可以看到最后一个元素(数字&#34; 11&#34;)如果你保持下一个应该遵循的元素滚动应该是第一个元素(数字&#34; 1&#34;)。如果你向左滚动(最后一个元素(数字&#34; 11&#34;)应该跟随)

我真的不知道如何使用jQuery或js实现这样的机制。所以这个css-styling就是我到目前为止所做的一切。遗憾。

**注意:**我不想添加新元素。我希望重复无限的相同元素。 (只显示11个元素)

然而 - 任何帮助都会非常感激。非常感谢!

2 个答案:

答案 0 :(得分:1)

我猜你想要这样的东西:

https://jsfiddle.net/ibowankenobi/oxg549mL/5/

var threshold = 50;
document.getElementById("parent").addEventListener("scroll",addMore,false);
function addMore(e){

    var div = e.currentTarget;
  if(div.scrollWidth - div.clientWidth -div.scrollLeft < 50) {
    var node = div.firstElementChild.cloneNode(true);
    node.textContent = div.children.length+1;
    div.appendChild(node);
  }
}

或重复版本:

https://jsfiddle.net/ibowankenobi/oxg549mL/8/

var threshold = 50;
document.getElementById("parent").addEventListener("scroll",addMore,false);
function addMore(e){

    var div = e.currentTarget;
  if(div.scrollWidth - div.clientWidth -div.scrollLeft < threshold) {
    var node = div.firstElementChild;
    div.appendChild(node);
  } else if (div.scrollLeft < threshold) {
    var node = div.lastElementChild;
    div.insertBefore(node,div.firstElementChild);
   div.scrollLeft = 2;
  }
}

答案 1 :(得分:0)

我在父级上附加了一个滚动事件,在完全右侧滚动时添加了一个元素。每当您完全滚动到任何一侧时,另一侧元素将附加到您所在的位置:

var counter = 10;
var childWidth = document.getElementById("child1").offsetWidth;
function checkEdge(event) {
    var parent = document.getElementById("parent");
    if ( parent.scrollLeft == parent.scrollWidth-parent.offsetWidth ) {
        //Detected scroll to the edge of the right
        counter = ((counter+1)%11);
        parent.appendChild(document.getElementById("child"+(counter+1))); 
        parent.scrollLeft -= childWidth;
    }
    
    if ( ! parent.scrollLeft ) {
        //Left edge
        counter = ((counter-1)%11);
        if ( counter == -2 ) counter = 9;
        parent.insertBefore((document.getElementById("child"+(counter+2))),parent.firstChild);
        parent.scrollLeft += childWidth;
    }
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

#parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.child {
  display: inline-block;
  border-radius: 100%;
  font-family: Arial;
  position: relative;
  margin-left: 3%;
  width: 50px;
  height: 50px;
  background: white;
}
<div id="container">
  <div id="parent" onscroll='checkEdge()'>
    <div class="child" id="child1">1</div>
    <div class="child" id="child2">2</div>
    <div class="child" id="child3">3</div>
    <div class="child" id="child4">4</div>
    <div class="child" id="child5">5</div>
    <div class="child" id="child6">6</div>
    <div class="child" id="child7">7</div>
    <div class="child" id="child8">8</div>
    <div class="child" id="child9">9</div>
    <div class="child" id="child10">10</div>
    <div class="child" id="child11">11</div>
  </div>
</div>

如果需要,您需要为container添加类似内容。