我希望得到一个包含多个项目的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;
所以css-styling
到目前为止工作得很好 - 但我想让parent
- 元素可滚动无限 - 以便child-elements
是善良的重复自己。
总结一下:在你向右滚动之后,你就可以看到最后一个元素(数字&#34; 11&#34;)如果你保持下一个应该遵循的元素滚动应该是第一个元素(数字&#34; 1&#34;)。如果你向左滚动(最后一个元素(数字&#34; 11&#34;)应该跟随)。
我真的不知道如何使用jQuery或js实现这样的机制。所以这个css-styling就是我到目前为止所做的一切。遗憾。
**注意:**我不想添加新元素。我希望重复无限的相同元素。 (只显示11个元素)
然而 - 任何帮助都会非常感激。非常感谢!
答案 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
添加类似内容。