javascript jquery在水平滚动容器中找到元素的左侧位置

2019年8月3日 182次阅读

我有一个溢出：自动容器,跨越文档窗口的400％宽度.因此我的页面上有一个水平滚动条.我在这个容器内也有多个div,左边位置不同.当我点击它们时,我需要获得每个容器的左侧位置.我使用$(this).offset().left但是这给了我容器div的左偏移量,它是0px而我使用了$(this).position().left但是这给了我同样的东西.. .. 有什么建议？

标记看起来像这样：

<div id='scroll'>
 <div id='content'>
   <div class='container' rel='1'></div>
   <div class='container' rel='2'></div>
   <div class='container' rel='3'></div>
   <div class='container' rel='4'></div>
 </div>
</div>

CSS

#scroll{
   position:absolute;
   width:100%;
   height:95%;
   overflow:auto;
   }
#content{
   float:left;
   height:100%;
}
.container{
   height:100%;
   float:left;
   }

jQuery的

 var iMaxSize = $(".container").size();
 $("#content").css({width: $(document).width()*iMaxSize +'px' });
 $(".container").css({width: $("#content").width()/iMaxSize +'px' });

最佳答案 您可以像这样使用容器元素中的滚动位置;

$('#container .element').offset().left - $('#container').offset().left + $('#container').scrollLeft();

见JSFiddle here

点赞