无限可滚动的div？ [英] Infinite scrollable div?

问题描述

  #container {position：absolute;宽度：100％;身高：100％;}＃parent {position：relative;宽度：90％;身高：40％;溢出-y：隐藏; overflow-x：scroll; text-align：center;白色空间：nowrap; background：red;}。child {display：inline-block;边界半径：100％; font-family：Arial;位置：相对;余量：3％;宽度：50px; height：50px;背景：白色;}  

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

所以 css-styling 目前工作得非常好 - 但我想让父 -element可滚动无限 - 这样子元素就可以自己重复。

总结一下： 在向右滚动以便能够看到最后一个元素（数字11）之后，如果继续滚动，应该遵循的下一个元素应该是第一个元素（数字1）。如果您滚动到左侧（最后一个元素（数字11）应该跟着），这也是一样的。。

我真的不知道如何实现一个像这样使用jQuery或js的机制。所以这个CSS样式是我到目前为止。对不起。

**注意：**我不想添加新元素。我希望同样的元素重复无限。 （总是显示11个元素）

然而 - 任何帮助将非常感激。非常感谢！

解决方案

我在父级上附加了一个滚动事件，在右侧滚动时添加一个元素。每当你完全滚动到任何一边时，另一边的元素就会附加到你所在的位置：

  var counter = 10; var childWidth = document.getElementById（child1）。offsetWidth; function checkEdge（event）{var parent = document.getElementById（parent）; if（parent.scrollLeft == parent.scrollWidth-parent.offsetWidth）{//检测到滚动到右边计数器的边缘=（（counter + 1）％11）; parent.appendChild（的document.getElementById（ 子 +（计数器+ 1）））; parent.scrollLeft  -  = childWidth; } if（！parent.scrollLeft）{//左边缘计数器=（（counter-1）％11）; if（counter == -2）counter = 9; parent.insertBefore（（的document.getElementById（ 子 +（计数器+ 2））），parent.firstChild）; parent.scrollLeft + = childWidth; }}  

  #container {position：absolute;宽度：100％;身高：100％;}＃parent {position：relative;宽度：90％;身高：40％;溢出-y：隐藏; overflow-x：scroll; text-align：center;白色空间：nowrap; background：red;}。child {display：inline-block;边界半径：100％; font-family：Arial;位置：相对;余量：3％;宽度：50px; height：50px;背景：白色;}  

 < div id =container > < div id =parentonscroll ='checkEdge（）'> < div class =childid =child1> 1< / div> < div class =childid =child2> 2< / div> < div class =childid =child3> 3< / div> < div class =childid =child4> 4< / div> < div class =childid =child5> 5< / div> < div class =childid =child6> 6< / div> < div class =childid =child7> 7< / div> < div class =childid =child8> 8< / div> < div class =childid =child9> 9< / div> < div class =childid =child10> 10< / div> < div class =childid =child11> 11< / div> < / div>< / div>  

您需要如果你想要的话，为容器添加类似的东西。

I'd like to get a div element that includes multiple items next to each other.

#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>

So the css-styling is working very good so far - but I'd like to make the parent-element scrollable infinite - so that the child-elements are kind of repeating thereself.

To sum up: After you've scrolled to the right so that you are able to see the last element (number "11") the next element that should follow if you keep scrolling should be the first element again (number "1"). The same if you scroll to the left (the last element (number "11") should follow).

I really got no idea how to implement a mechanism like this using jQuery or js. So this css-styling is all I got so far. Sorry.

**Note: ** I do not want to add new elements. I'd like the same elements to repeat infinite. (Just displaying always 11 elements)

However - any help would be really appreciated. Thanks a lot!

解决方案

I attached an on scroll event for example on parent, adding an element on full right scrolling. Every time you scroll completely to any side, the other side element is attached where you are:

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>

You need to add something similar for the container if you want it.

这篇关于无限可滚动的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！