Jquery 滚动 1 div 其他 div 向后滚动

Question

我想建立一个应用程序界面，允许用户向左滑动/滚动div，然后其他具有相同类的div将滑动/滚动回原来的位置，但我发现在我滚动div之后，div无法滚动再一次，有人知道如何解决这个问题吗？

这是我的代码

$(document).ready(function() {

        $('.swipe_div').scroll(function(){
          var target = $(this);
          if(target.scrollLeft() >= 1){
            $('.swipe_div').not(target).animate({scrollLeft: 0});
          }
        });
      });

fiddle

https://jsfiddle.net/ga7eyqvj/

例子

http://cdn.andnowuknow.com/thumbnails/3_2.jpg?RSYldA2RrAvIhNLXKpH7YgvaejlDGWjW

Answer 1

Here is the example code you need.

$(document).ready(function() {
  var scrolling;
  $('.swipe_div').scroll(_.throttle(function() {
    if (!scrolling) {
      scrolling = true;
      $(this).siblings(".swipe_div").not($(this)).animate({
        scrollLeft: 0
      }, 150);
    } else {
      scrolling = false;
    }
  }, 800, {
    leading: true,
    trailing: true
  }));
});

body,
html {
  width: 100%;
  height: 100%;
  background-color: green;
  padding: 0;
  margin: 0;
}

.swipe_div {
  display: block;
  float: left;
  width: 100%;
  height: 100px;
  overflow-x: scroll;
  background-color: white;
}

.content,
.operation,
.swipe_container {
  display: block;
  float: left;
  height: 100%;
}

.swipe_container {
  width: 150%;
}

.content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  text-align: right;
  font-size: 30pt;
  width: 67%;
  background-color: grey;
}

.operation {
  width: 33%;
  background-color: red;
}

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swipe_div">
  <div class="swipe_container">
    <div class="content">
      &#x3e;
    </div>
    <div class="operation">

    </div>
  </div>

</div>

<div class="swipe_div">
  <div class="swipe_container">
    <div class="content">
      &#x3e;
    </div>
    <div class="operation">

    </div>
  </div>

</div>
<div class="swipe_div">
  <div class="swipe_container">
    <div class="content">
      &#x3e;
    </div>
    <div class="operation">

    </div>
  </div>

</div>