javascript - 如何避免使用溢出

Question

我正在创建一个导航/菜单栏，我希望它在光标移过它时水平移动。目前这是有效的，但我不想将溢出属性设置为隐藏，因为我有下拉选项卡，当光标位于菜单选项上时应该出现这些选项卡。如果我要使用溢出，那么它会在某个点被切断，但下拉菜单也会被切断。内部滚动包含菜单选项。

var sum = 0;
$("#scroll li").each(function () {
  sum += $(this).width() + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'))
});
$("#scroll").css('width', sum);

$("#holder").mousemove(function (e) {
  x = -(((e.pageX - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingLeft')) + parseInt($("#scroll").css('paddingRight')) - $("#holder").width()));
  $("#scroll").css({
    'marginLeft': x + 'px'
  }); 
});

#scroll{
  height: 30px;
  line-height: 30px;
  margin-left: 0;
  padding: 0 10px;
}
#scroll li {
  float: left;
  padding: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder" style="width: 800px;line-height: 30px; /* overflow: hidden; */margin-left: 10px;float: left;">
  <div id="scroll" class="nav-collapse"> </div>
</div>

请帮助提供使用溢出的替代解决方案。

Answer 1

如果没有完整的代码示例或 JSFiddle 引用，我真的帮不了你，但我猜你可以使用 overflow-x : hidden。