webentwicklung-frage-antwort-db.com.de

jQuery offset (). top liefert einen falschen Wert - Fehler mit Rand

wenn Sie versuchen, einen oberen Versatz von einem Listenelement innerhalb eines übergeordneten Elements zu erhalten, und dieses übergeordnete Element nicht oben positioniert ist, erhalten Sie einen falschen Wert.

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

Versuchen Sie, margin-top vom .container-Element zu entfernen, und Sie werden sehen, dass es funktionieren wird. 

Was ist die Lösung für dieses Problem? 

11
user3631654

Ihre Frage:

Was ist die Lösung für dieses Problem?

Ich schlage vor, den .container in relative zu positionieren:

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

und in Ihrem Skript verwenden Sie .position().top, es wird Ihnen das Leben leichter machen:

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

.offset().top:
Description: Ermittelt die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum Dokument. 

.position().top:
Aus den Dokumenten: 

Beschreibung:Ermittelt die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum übergeordneten Versatz. 

.position().top wird von oben bis zum übergeordneten Element berechnet, wenn das übergeordnete Element relativ positioniert ist. 

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

23
Jai

Dieses Problem kann auch auftreten, wenn es sich bei Ihrem Inhalt um Bilder handelt. Wenn Sie .offset () in document.ready () aufrufen, wurden die Bilder möglicherweise noch nicht geladen. Versuchen Sie, Ihren Aufruf von .offset () nach window.load () zu verschieben.

3
Nate

Ich denke es funktioniert einwandfrei. Laut offset()jQuery-Dokumentation :

Die .offset () -Methode ermöglicht es uns, die aktuelle Position eines .__ abzurufen. Element relativ zum Dokument

Das Problem, das Sie haben, ist also, dass Sie versuchen, die Variable ul mit dem Wert von scrollTop des Elements innerhalb des Dokuments und nicht innerhalb der Liste zu scrollen. Um dies zu beheben, korrigieren Sie einfach den Wert, indem Sie den scrollTop des übergeordneten Objekts (die ul) berücksichtigen:

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

Sie können sehen, wie er an dieser Bearbeitung Ihres JSBin arbeitet: http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output

0
Alvaro Montoro

Ich hatte das gleiche Problem. Alle Lösungen im Web funktionieren für mich nicht.

Wenn Sie den Rand verwenden, um bestimmte Elemente ohne Rahmen zu trennen, verwenden Sie stattdessen eine Auffüllung. Das Offset () von jQuery zählt für die Auffüllung, schließt jedoch die Ränder aus. Die Positionsnummern in offset () werden wieder korrekt.

0
Eric Luo