Question

理想行为

在包含多个.container的div的可滚动div中，获取最接近可滚动div的可视区域顶部的div的索引，以便我可以对其应用类并将容器滚动到其顶部。

编辑-在撰写本文时，我最终想出了一个解决方案，因此只需发布此Q&A style，以免对其他人有帮助。

Answer 1

这是我想出的解决方案。

$(document).on("click", "#clicker", function() {

  // get reference to parent container
  $container_container = $("#container_container");

  // get reference to child containers
  var $containers = $(".container");

  // get vertical position of scrollable div
  var scrollable_div_vertical_position = $container_container.scrollTop();

  // show and log vertical position value
  $(".y_position").text(scrollable_div_vertical_position);
  console.log("y position: " + scrollable_div_vertical_position);

  // declare variables to capture desired target div properties
  var target_div_index = "";
  var target_div_position_top = "";

  // iterate over child containers and get the first instance 
  // of div where position_top is greater than or equal to -75 
  $containers.each(function(index) {
    let position_top = $(this).position().top;
    console.log("container index " + index + " position_top: " + position_top);
    if (position_top >= -75) {
      target_div_index = index;
      target_div_position_top = position_top;
      return false;
    }
  });

  // remove highlight class from all child containers
  $(".container").removeClass("highlight");
  // apply the highlight class to the target div
  $(".container").eq(target_div_index).addClass("highlight");
  // show the target_div_index value  
  $(".target_div_index").text(target_div_index);

  // scroll to the top of the div closest to the top of the scrollable div  
  $container_container.animate({
    'scrollTop': $container_container.scrollTop() + target_div_position_top
  }, 0);

  console.log("target_div_index: " + target_div_index);

  console.log("============================");

});

#container_container {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #000;
  position: relative;
}

.container {
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding: 50px 20px;
}

.container p {
  margin: 0px;
}

.highlight {
  background: lime;
}

.y_position,
.target_div_index {
  background: #eee;
  width: 40px;
  display: inline-block;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="clicker">
highlight div closest to top of scrollable area
</button> y position: <span class="y_position"> </span>, index of closest div to top: <span class="target_div_index"> </span>
<br><br>
<div id="container_container">

  <div class="container">

    <p>01. container contents</p>

  </div>

  <div class="container">

    <p>02. container contents</p>

  </div>


  <div class="container">

    <p>03. container contents</p>

  </div>

  <div class="container">

    <p>04. container contents</p>

  </div>


  <div class="container">

    <p>05. container contents</p>

  </div>

  <div class="container">

    <p>06. container contents</p>

  </div>

  <div class="container">

    <p>07. container contents</p>

  </div>

  <div class="container">

    <p>08. container contents</p>

  </div>

  <div class="container">

    <p>09. container contents</p>

  </div>

  <div class="container">

    <p>10. container contents</p>

  </div>

  <div class="container">

    <p>11. container contents</p>

  </div>

</div>

如何获得最接近可滚动div可视区域顶部的div索引？

1 个答案: