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

当您动画jsrequire <foo> language:haxe时，您正在激活兄弟姐妹的scrollLeft，这会尝试动画滚动您正在主动滚动的div。因此，您需要在开始滚动时进行标记并scroll() throttle()之后的所有后续调用，直到您完成滚动。

scroll()在没有为 throttle_interval （本例中为trailing:true）调用之后再次调用它，将250标记恢复到scrolling：

＆＃13;

false

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

在.animate（）和.prop（）上滚动问题？

1 个答案: