在.animate()和.prop()上滚动问题？

Question

我有两个同类的div.如果我滚动一个div,其他divs滚动到0.我能够轻松实现.prop()属性.但是当我使用.animate()时,事件只发生一次然后它停止工作(在我的示例代码段中对代码进行了评论).我想要的是滚动到零时应该动画,即滚动到0,动画就像用.animate()显示.

注意:div的类别是相同的,也可以有更多的div.

这是我试过的代码,请告诉我哪里错了.

$(document).ready(function() {

  $('.swipe_div').scroll(function() {


    // $(this).siblings(".swipe_div").animate({scrollLeft: 0},100);
    $(this).siblings(".swipe_div").prop({
      scrollLeft: 0
    });

  });
});

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

Answer 1

当你动画时,scrollLeft你正在激活scroll()兄弟姐妹,这是试图动画滚动div你正在积极滚动.所以你需要标记何时开始滚动和throttle()所有后续调用,scroll()直到你完成滚动.

trailing:true在没有为throttle_interval调用之后再次调用它 (250在此示例中),将scrolling标记返回到false:

$(document).ready(function() {
  var scrolling;
  $('.swipe_div').scroll(_.throttle(function() {
    if (!scrolling) {
      scrolling = true;
      $(this).siblings(".swipe_div").animate({scrollLeft: 0},150);
    } else {
      scrolling = false;
    }
  }, 250, {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>

我测试了一下,实际上发现了一个小故障/限制:节流间隔必须小于动画时间.如果不是,则动画将超过节流间隔,并依次触发原始滚动元素的关闭动画.

但这是web(不可能是什么):如果你的动画必须长于节流间隔,你必须用一个类来标记初始元素,这个类将使它不被动画化.该类将在动画完成时使用超时删除,等于节流间隔:

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