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)
由于某种原因,我仍然无法让 .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)
| 归档时间: |
|
| 查看次数: |
7403 次 |
| 最近记录: |