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});
          }
        });
      });

拨弄

https://jsfiddle.net/ga7eyqvj/

例如

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

Answer 1

  

以下是您需要的示例代码。

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

Answer 2

更新您的代码，如：

 $(document).ready(function() {

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

Answer 3

我认为你应该像这样需要

$(document).ready(function() {

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