jQuery:将元素滚动到视口中 [英] JQuery: scroll element into viewport

问题描述

我想做与"滚动到"相反的操作:即，而不是滚动到div，我希望div滚动到我. 我"是以下行之一(Twitter引导程序row):

I want to do the opposite of "Scroll to" : That is, instead of scrolling to a div, I want the div to scroll to me. "Me" being one of the following rows (twitter bootstrap row) :

+-------------+-----------+   +-------------+-----------+ 
+-------------+           |   +-------------+           |
+---click-----+   div     |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+-----------+
+-------------+           |   +-------------+           |
+-------------+           |   +---click-----+    div    |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+-----------+

请参见，当我单击左下一行之一时，视口将滚动到内容div.我想要相反的事情:我希望这个div(动态创建一个Twitter引导程序col-nn，然后可以语义上在其自己的高容器内滑动")滚动到位.

See, when I click on one of the lower left rows, the viewport scrolls to the content div. I want the opposite : I want this div (a twitter bootstrap col-nn created on the fly, than can semantically "slide" inside its own tall container) to scroll into place.

因此，单击时row必须不得不以某种方式检测到div在视线之外.这似乎；但是移动的div部分呢?

So the row will have to, on click, somehow detect that the div is out of sight. This seems possible ; but what about the moving div part?

<div class="row">
  <div class="col col-lg-12 col-sm-12">
    <div class="col-md-8">
      <table class="table">
        <thead>
          <tr>
            <th>Row title</th>
          </tr>
        </thead>
        <tbody>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>
<!-- a lot of other rows -->        
        </tbody>
      </table>
    </div> <!-- col-md-8 -->

    <div id="details" class="col-md-4 details">
      <div>THIS IS THE DIV</div>
    </div> <!-- col-md-4 -->

  </div> <!-- col-sm-12 -->
</div>

推荐答案

我构建了这个 jsFiddle 来说明您可能会实现如您所说的那样，也就是说，如果我正确理解了您想要的东西.我使用CSS3过渡来简化实际的动画，由于更改DIV的"top"属性的0ms超时而被触发.在我提供的示例中，我将DIV的顶部与单击的行的顶部对齐.显然，您可以根据需要将其更改为浮动在中间(通过做一些数学运算).

I constructed this jsFiddle to illustrate how you might achieve something like what you stated, that is if I understood correctly what you wanted. I used a CSS3 transition to facilitate the actual animation, which gets triggered because of the 0ms timeout in changing the "top" property of the DIV. In the sample I provided, I aligned the top of the DIV to the top of the row that was clicked. Obviously, you can change it to float in the center if you wish (by doing some mathemagics).

希望它会为您指明正确的方向！

Hope it points you in the right direction!

HTML

根据您的问题提供...

As supplied in your question...

CSS

#details {
    transition: top 0.2s ease-in-out;
}

JavaScript

$(document).ready(function () {
    $("#details").css("top", $(".my_row:first").offset().top);
    $(".my_row").click(function () {
        var row = $(this);
        setTimeout(function () {
            $("#details").css("top", row.offset().top);
        }, 0);
    });
});

这篇关于jQuery:将元素滚动到视口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！