6

我有一个溢出：自动容器，它跨越了文档窗口的 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' });
4

5 回答 5

4

您可以像这样使用容器元素中的滚动位置；

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

在此处查看 JSFiddle

于 2015-06-25T12:05:00.353 回答
1

position()如果您遇到偏移问题，请使用而不是偏移。使用滚动对象的 width() 来解释它。当然，您可以更改选择器类型以使用 id 或任何适合您的情况。

$('.class for container div')
     .animate( { scrollLeft: 
         $('.class for you want to scroll to').position().left - 
         $('.class for you want to scroll to').width() }
     ,'slow');
于 2017-10-18T18:17:24.673 回答
0

你有没有尝试过这样的事情......

$('#id').width();
于 2011-06-19T02:00:51.037 回答
0

我自己之前没有使用过它，但我想它的工作原理类似于 scrollTop - 看看scrollLeft()你需要做的一件事是在滚动发生之前找到元素的起始 scrollLeft 位置并缓存它 - 然后从滚动后获得的新 scrollLeft 位置中减去它。

编辑等等，offset() 不起作用？它应该工作。

于 2011-06-19T02:16:04.510 回答
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
 });
于 2011-06-27T12:21:55.810 回答