Question

我有以下物品清单。它们显示为与父级overflow-x:scroll的内联块。

我正在尝试相对于父级获取position.left，但总是返回-10每个li元素的margin-right:10。那么如何获得元素相对于父元素的position.left？

console.log(jQuery('li[data-menuanchor="about-us"]').position().left); //returns -10

console.log(jQuery('li[data-menuanchor="our-services"]').position().left); //returns -10

console.log(jQuery('li[data-menuanchor="our-products"]').position().left); //returns -10

ul.premium-vscroll-dots-list-custom {
  background-color: #fff!important;
  opacity: .75!important;
  display: inline-block!important;
  white-space: nowrap!important;
  height: 72px!important;
  padding-top: 0!important;
  overflow-y: hidden!important;
  width: 100%!important;
  overflow-x: scroll!important;
  width: 200px!important;
}

li.premium-vscroll-dot-item {
  display: inline-block!important;
  min-width: 40px!important;
  width: auto!important;
  vertical-align: baseline!important;
  margin-bottom: 0!important;
  cursor: pointer!important;
  height: 54px!important;
  margin: 20px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="premium-vscroll-dots-list-custom">
  <li data-index="0" data-menuanchor="home-banner" class="premium-vscroll-dot-item">Top</li>
  <li data-index="1" data-menuanchor="about-us" class="premium-vscroll-dot-item">About us</li>
  <li data-index="2" data-menuanchor="our-services" class="premium-vscroll-dot-item">Our Services</li>
  <li data-index="3" data-menuanchor="our-products" class="premium-vscroll-dot-item">Our Products</li>
</ul>

position（）。left相对于上一个孩子（而不是父对象）保持返回

0 个答案: