Question

我正在尝试创建一个容器，其中所有子类都位于同一类中。

我正在尝试获取被单击的div与容器顶部之间的差异，然后为该被单击的div动画到容器的顶部。

我得到的结果参差不齐。当它起作用时，它会先进行动画处理，然后再将容器的位置恢复为原始位置。

任何人都可以给我一些为什么它不能正常工作的见解吗？

下面的代码。

    <style>
#contact-list-scroller {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: Silver;
    overflow:scroll;
    width: 200px;
}

#contact-list-scroller div {
    background: white;
    width: 150px;
    height: 150px;
    border: 1px solid Gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:150px; height:100vh;">
<div id="contact-list-scroller">
   <div class="test" id="contact_8965">stuff1</div>
   <div class="test" id="contact_8966">stuff2</div>
   <div class="test" id="contact_8967">stuff3</div>
   <div class="test" id="contact_8968">stuff4</div>
   <div class="test" id="contact_8969">stuff5</div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
</div>
</div>
<script>
$('.test').click(function(){

var contactTopPosition = $(this).offsetTop;
var containerTop = $('#contact-list-scroller').scrollTop();
var heightDifference = containerTop - contactTopPosition;
console.log(contactTopPosition + ' contactTop');
console.log(containerTop + ' containerTop');
console.log(heightDifference + ' heightDifference');

//$("#contact-list-scroller").scrollTop(contactTopPosition);
$("#contact-list-scroller").animate({scrollTop: heightDifference,
    complete: $(this).unbind()
  });
});

</script>

Answer 1

是否有理由在容器<div>中分配每个class="test"？如果每个孩子都是一个div，并且具有相同的类，则可以使用CCS的 cascading 部分来定位他们。我还注意到过渡后有一个$(this).unbind()-您希望每个元素只能被单击一次？

假设没有一个特定的班级需要所有孩子，我整理了一个代码段，并注释了unbind()。它使用element.position().top查找元素与其父级顶部之间的可见距离，然后添加父级的当前滚动值。

$('#contact-list-scroller > div').click(function() {

  var contactTopPosition = $(this).position().top;
  var contactList = $(this).parent();

  console.log(contactTopPosition + ' contactTop');

  contactList.animate({
    scrollTop: contactList.scrollTop() + contactTopPosition
    //, complete: $(this).unbind() // Stops the function from running again after the first click, is that waht you want?
  });
});

#contact-list-scroller {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: Silver;
  overflow: scroll;
  width: 200px;
}

#contact-list-scroller div {
  background: white;
  width: 150px;
  height: 150px;
  border: 1px solid Gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="position:relative; width:150px; height:100vh;">
  <div id="contact-list-scroller">
    <div id="contact_8965">stuff1</div>
    <div id="contact_8966">stuff2</div>
    <div id="contact_8967">stuff3</div>
    <div id="contact_8968">stuff4</div>
    <div id="contact_8969">stuff5</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

得到一个容器的顶部之间的差异点击元素

1 个答案: