web-dev-qa-db-ja.com

jQuery offset（）。topが間違った値を返します-マージン付きエラー

親内のリスト要素からトップオフセットを取得しようとして、その親がトップに配置されていない場合、間違った値を取得します。

http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output

margin-top要素の.containerを削除してみてください。動作することがわかります。

この問題の解決策は何ですか？

javascriptjqueryhtmlcssjquery-animate
12
user3631654

あなたの質問：

この問題の解決策は何ですか？

_.container_をrelativeに配置することをお勧めします。

_.container{
  margin-top:100px;
  background:yellow;
  height:600px;
  width:300px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative; /*<---add this*/
}
_

スクリプト内で.position().topを使用すると、生活が楽になります。

_$('.container li:nth-child(7)').css("background", "red");
$('.container').animate({
    scrollTop: $('.container li:nth-child(7)').position().top
});
_

.offset().top：
Description：一致した要素のセットの最初の要素の現在の座標を取得します。資料..

.position().top：
ドキュメントから：

Description：一致した要素のセットの最初の要素の現在の座標を、オフセットの親を基準にして取得します。

親が相対的に配置される場合、.position().topは上から親まで計算されます。

_$(function() {
  $('.container li:nth-child(7)').css("background", "red");
  $('.container').animate({
    scrollTop: $('.container li:nth-child(7)').position().top
  });
});_
_html,
body {
  margin: 0;
  padding: 0;
}
.container {
  margin-top: 100px;
  background: yellow;
  height: 600px;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.container ul {
  margin: 0;
  padding: 0;
  list-style: none outside none;
}
.container li {
  background: blue;
  display: block;
  height: 150px;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd77</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
    <li>asdasd</li>
  </ul>
</div>_
25
Jai

コンテンツの一部が画像の場合にも、この問題が発生する可能性があります。 document.ready（）内で.offset（）を呼び出している場合、画像はまだロードされていない可能性があります。 .offset（）呼び出しをwindow.load（）に移動してみてください。

3
Nate

私はそれが適切に機能していると思います。 offset()jQueryドキュメント によると：

.offset（）メソッドにより、ドキュメントに対する要素の現在の位置を取得できます

したがって、あなたが抱えている問題は、ulをスクロールしようとしているが、ドキュメント内で要素のscrollTopの値を使用しようとしていることです、およびリスト内ではありません。これを修正するには、親のscrollTop（ul）を考慮して値を修正します。

$(function(){
    $('.container li:nth-child(7)').css("background", "red");
    $('.container').animate({
        scrollTop: $('.container li:nth-child(7)').offset().top - $(".container").offset().top
    });
});

JSBinのこの編集で動作していることがわかります。 http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output

0
Alvaro Montoro

同じ問題がありました。 Webのすべてのソリューションが私にとってうまくいくわけではありません。

マージンを使用して境界線のない特定の要素を分離する場合は、代わりにパディングを使用します。 jQueryのoffset（）はパディングにはカウントされますが、マージンは除外されます。 offset（）の位置番号が再び正しくなります。

0
Eric Luo