Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

如果没有完整的代码示例或JSFiddle参考，我无法帮助您，但我可以使用overflow-x : hidden。

如何避免使用溢出

1 个答案: