jQuery offset（）。top返回错误的值 - 带有空白的错误 [英] jQuery offset().top returns wrong value - error with margin

问题描述

如果您尝试从父级中的列表元素获取顶部偏移量，并且该父级不在顶部，则会得到错误的值。

http://jsbin.com/yuxacuduna/1/edit？ HTML，CSS，JS，控制台，输出

尝试移除 margin-top code> .container 元素，你会看到它会起作用。

这个问题的解决方案是什么？

解决方案

您的问题：

对于这个问题？

我建议您将 .container 放置到相对：

  .container {
 margin-top：100px; 
背景：黄色; 
 height：600px; 
 width：300px; 
 overflow-y：auto; 
 overflow-x：hidden; 
职位：亲属; / *< --- add this * / 
} 
  

.position（）。top ，它会让你的生活变得更轻松：

  $（'。container li：nth-​​child（7）'）。css（background，red）; 
 $（'。container'）。animate（{
 scrollTop：$（'。container li：nth-​​child（7）'）。position（）。top 
}）; 
  

---

。 offset（）。top ：

描述 ：获取第一个元素的当前坐标一组匹配元素，相对于文档。

.position（）。top ：

来自文档：

描述： 获取当前坐标匹配元素集合中的第一个元素，相对于偏移父元素。
$ b $ <$> .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;背景：黄色; height：600px;宽度：300px;溢出-y：auto; overflow-x：hidden; position：relative;}。container ul {margin：0;填充：0; list-style：none outside none;}。container li {background：blue;显示：块; height：150px;宽度：100％;填充：10px; margin-bottom：5px;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =container> < UL> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd77< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> <李> asdasd< /锂> < / div>

if you try to get a top offset from a list element within a parent, and that parent is not positioned at the top, you will get a wrong value.

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

Try removing the margin-top on the .container element and you will see it will work.

What is the solution for this problem?

解决方案

Your question:

What is the solution for this problem?

I suggest you to position the .container to relative:

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

and within your script use .position().top, it will make your life easier:

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

---

.offset().top:
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document..

.position().top:
From the docs:

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

.position().top is calculated from the top to the parent if parent is relatively positioned.

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

这篇关于jQuery offset（）。top返回错误的值 - 带有空白的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！