溢出内容的宽度

Question

I'm working on a tag scroller that will basically allow users to scroll through chunks of tags left or right if there are more tags than fit their current containing div. My plan was to have the component div set to overflow:hidden so the tags (and their parent div) would not wrap. Then I'd have left and right arrows that would animate the tag wrapper to the left or right.

I need to determine if the width of the tag-wrapper is greater than the tag-scroller itself. If so, then I know that there are more tags than fit within the tag-scroller and I should make the arrows visible so a user can click to scroll and view some more. The layout and everything looks as expected however my problem is, using $('.tag-wrapper').width(); always returns a different value depending on window width which shouldn't be the case since the actual content hasn't changed. If the screen is wide enough, I may not need to show the arrows so I need to check the width on window resize, etc.

Any ideas why $('.tag-wrapper').width(); would give me different sizes based on the actual window width even thought the scrollable content itself hasn't changed?

Here is my markup:

  .tag-scroller { overflow: hidden; white-space: no-wrap; display: block; width: 100%; height: 50px; } .tag-wrapper { white-space: nowrap; display: inline-block; border: 1px solid green; } .tag { display: inline-block; width: initial; text-align: center; padding: 5px 10px 6px 10px; } 

 <div class="tag-scroller"> <div class="tag-wrapper"> <div class="tag"></div> <div class="tag"></div> <div class="tag"></div> <div class="tag"></div> </div> </div> 

Answer 1

I used the jQuery outerWidth method.

 $(function() { $(document).on('DOMNodeInserted DOMNodeRemoved', '.tag-wrapper', function(e) { $('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth()); if ($('.tag-wrapper').outerWidth() > $('.tag-scroller').outerWidth()) { alert('ok'); } }); $('#btn').click(function(e) { $('.tag-wrapper').append($('<div class="tag">1</div>')); }); $('#btnWidth').click(function(e) { $('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth()); }); }); 

 .tag-scroller { overflow:hidden; white-space:no-wrap; display:block; width:100%; height:50px; } .tag-wrapper { white-space: nowrap; display:inline-block; border:1px solid green; } .tag { display:inline-block; width:initial; text-align:center; padding: 5px 10px 6px 10px; } 

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <div class="tag-scroller"> <div class="tag-wrapper"> <div class="tag">1</div> <div class="tag">2</div> <div class="tag">3</div> <div class="tag">4</div> </div> </div> <button id="btn">Click Me</button> <button id="btnWidth">Check Widths</button> <p id="p"></p>