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

sad*_*ave 6 javascript jquery overflow horizontal-scrolling

我有一个溢出:自动容器,它跨越文档窗口的 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>
Run Code Online (Sandbox Code Playgroud)

css

#scroll{
   position:absolute;
   width:100%;
   height:95%;
   overflow:auto;
   }
#content{
   float:left;
   height:100%;
}
.container{
   height:100%;
   float:left;
   }
Run Code Online (Sandbox Code Playgroud)

查询

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

sad*_*ave 0

由于某种原因,我仍然无法让 .offset() 或scrollLeft() 按其应有的方式工作。我只是决定以一种非常迂回的方式来做这件事。

 $('.container').click(function(){
     var num = parseInt( $(this).attr('rel') );
     var left = $('.container').width() * num-1;
     var top  = $('.container').css('top');
     //do something with these values
 });
Run Code Online (Sandbox Code Playgroud)