Question

我正在开发一个标签滚动条，它基本上允许用户向左或向右滚动标签块，如果有更多标签而不是适合当前包含div的标签。我的计划是将组件div设置为溢出：隐藏，以便标签（及其父div）不会换行。然后我会有左箭头和右箭头，可以使标签包装器向左或向右动画。

我需要确定标签包装器的宽度是否大于标签滚动器本身。如果是这样，那么我知道标签滚动器中有更多的标签，我应该使箭头可见，以便用户可以单击滚动并查看更多。布局和一切看起来都像预期的那样我的问题是，使用$（'。tag-wrapper'）。width（）;始终返回一个不同的值，具体取决于窗口宽度，因为实际内容没有改变，所以不应该是这种情况。如果屏幕足够宽，我可能不需要显示箭头，所以我需要检查窗口调整大小等的宽度。

任何想法为什么$（'。tag-wrapper'）。width（）;即使可滚动内容本身没有改变，我会根据实际窗口宽度给出不同的大小吗？

这是我的标记：

   .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

我使用了jQuery outerWidth方法。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

setNeedsUpdateConstraints

＆＃13;

溢出内容的宽度

1 个答案: