Question

嗨我想在cirlce（水平）中滚动div无穷大。当我向右滚动div并且它到达结尾时，它应该停止，它应该从第一个项目开始并四处走动。目前我只能从左到右滚动。它停在最后一项。这是我的代码：

$(".arrowLeft").click(function(){
  	var e = $('.myList');
    var scrollLength = 20;
	e.scrollLeft(e.scrollLeft() - scrollLength);
});

$(".arrowRight").click(function(){
  	var e = $('.myList');
    var scrollLength = 20;
	e.scrollLeft(e.scrollLeft() + scrollLength);
});

.wrapper {
  display: flex;
  flex-direction: row;
}

.myList {
  width: 100px;
  height: 50px;
  background-color: grey;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 10px;
}

.arrows {
  height: 100%;
  width: 30px;
  background-color: rgb(240, 240, 240);
  text-align: center;
  cursor: pointer;
}

.listItems {
  height: 100%;
  width: 150px;
  color: white;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  
  <body>
    <div class="wrapper">
      <div class="arrows arrowLeft">&larr;</div>
    
      <div class="myList">
        <div class="listItem">Item 1</div>
        <div class="listItem">Item 2</div>
        <div class="listItem">Item 3</div>
        <div class="listItem">Item 4</div>
        <div class="listItem">Item 5</div>
      </div>
    
      <div class="arrows arrowRight">&rarr;</div>
    </div>
  </body>
</html>

当我点击左右箭头时，我想无限滚动。

这是一个带有右箭头绘制图片的示例：

由于

Answer 1

你是说这个？

$(".arrowLeft").click(function() {
  var e = $('.myList');
  var scrollLength = 20;
  e.scrollLeft(e.scrollLeft() - scrollLength);
  if (e.scrollLeft() == 0) {
    $('.listItem').last().insertBefore($('.listItem').first());
    e.scrollLeft(e.scrollLeft() - scrollLength);
  }
});


$(".arrowRight").click(function() {
  var e = $('.myList');
  var scrollLength = 20;
  e.scrollLeft(e.scrollLeft() + scrollLength);
  if (e.scrollLeft() + e.outerWidth() == e[0].scrollWidth) {
    $('.listItem').first().insertAfter($('.listItem').last());
    e.scrollLeft(e.scrollLeft() + scrollLength);
  }
});

.wrapper {
  display: flex;
  flex-direction: row;
}

.myList {
  width: 100px;
  height: 50px;
  background-color: grey;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 10px;
}

.arrows {
  height: 100%;
  width: 30px;
  background-color: rgb(240, 240, 240);
  text-align: center;
  cursor: pointer;
}

.listItems {
  height: 100%;
  width: 150px;
  color: white;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  
  <body>
    <div class="wrapper">
      <div class="arrows arrowLeft">&larr;</div>
    
      <div class="myList">
        <div class="listItem">Item 1</div>
        <div class="listItem">Item 2</div>
        <div class="listItem">Item 3</div>
        <div class="listItem">Item 4</div>
        <div class="listItem">Item 5</div>
      </div>
    
      <div class="arrows arrowRight">&rarr;</div>
    </div>
  </body>
</html>

在圆圈中滚动div无穷大

1 个答案: