javascript jquery find left position of element in horizontal scroll container - Stack Overflow

admin管理员组

文章数量:1278912

I have a overflow:auto container that spans 400% width of the document window. Therefore I have a horizontal scrollbar on my page. I also have multiple div's inside this container with different left positions. I need to get the left position of each container as I click on them. I use $(this).offset().left but that gives me the left offset of the container div which is 0px and I've used $(this).position().left but that gives me the same thing.... any suggestions?

Markup looks like this:

<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' });

I have a overflow:auto container that spans 400% width of the document window. Therefore I have a horizontal scrollbar on my page. I also have multiple div's inside this container with different left positions. I need to get the left position of each container as I click on them. I use $(this).offset().left but that gives me the left offset of the container div which is 0px and I've used $(this).position().left but that gives me the same thing.... any suggestions?

Markup looks like this:

<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' });

• javascript
• jquery
• overflow
• horizontal-scrolling

Share Improve this question Follow edited Jun 27, 2011 at 12:22 sadmicrowave asked Jun 19, 2011 at 1:53 sadmicrowavesadmicrowave 41k3434 gold badges115115 silver badges184184 bronze badges 5

• Could we see the markup used for it? – kinakuta Commented Jun 19, 2011 at 1:59
• @kinakuta - see OP for markup – sadmicrowave Commented Jun 19, 2011 at 2:09
• This is hard to test because you have .container in your CSS but not in your HTML. By the sounds of it when you click, you're clicking on the parent because it's "on top of" the child elements... is this the case? – jay Commented Jun 19, 2011 at 2:23
• Yeah, offset().left should be working here. Offset here returns the left position of the element with respect to the document. – kinakuta Commented Jun 19, 2011 at 2:27
• ... in reply to your question on my post, hit me up via email ([email protected]) to talk more about jquery dragging functionality. – Dave Commented Jun 23, 2011 at 2:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You can use the scroll position in the container element like this;

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

See JSFiddle here

Use position() instead of offset if you having trouble with offset. Use width() of the object your scrolling to account for it. Of course you can change the selector types to use ids or whatever fits your situation.

$('.class for container div')
     .animate( { scrollLeft: 
         $('.class for you want to scroll to').position().left - 
         $('.class for you want to scroll to').width() }
     ,'slow');

I haven't used it myself before, but I imagine it works similarly to scrollTop - take a look at scrollLeft() One thing you'll need to do is find the starting scrollLeft position of the element before scrolling occurred and cache it - then subtract that from the new scrollLeft position obtained after scrolling.

edit Wait, offset() isn't working? It should be working.

Since for some reason I still can't get .offset() to work the way it should, or scrollLeft(). I just decided to do this a very round about way.

 $('.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
 });

did you try something like this...

$('#id').width();

本文标签： javascript jquery find left position of element in horizontal scroll containerStack Overflow