ui.position.left 不使用 CSS 边距：0 自动

Question

我想构建一个应该使用边距的可滚动菜单：0 auto;

下面是我的 codepen，它 工作 很好 因为我没有使用 css margin: 0 auto（请参阅 css 面板 .wrap 类)。

但这有两个问题：

1. 它没有端到端滚动 - Codepen url：codepen.io/VK009/pen/PRKmNP

2. 在.wrap 中使用margin: 0 auto; 时，由于ui.offset.left 而停止正常工作- Codepen url:- codepen.io/VK009/pen/yKobVP

如何让菜单使用margin：0 auto 和端到端滚动。

Answer 1

在此 ID 上添加此 CSS。希望这会奏效。

#nav_main{
overflow-x:scroll;
}

Answer 2

尝试使用ui.offset而不是ui.position...这里的想法是使用父宽度和子宽度之间的差异来拖动元素...

var parentPos = $('.samNan').offset();
var parentWidth = $('.samNan').outerWidth();
var childWidth = $('.wrap').outerWidth();
var diff = parentWidth - childWidth;
$(".wrap").draggable({
  drag: function(event, ui) {
    if (ui.offset.left <= parentPos.left && ui.offset.left >= diff + parentPos.left) {
      ui.offset.left = parentPos.left;
    } else {
      return false;
    }
  },
  scroll: false,
  axis: "x"
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.samNan {
  width: 400px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid;
}

.wrap {
  background: #ccc;
  white-space: nowrap;
  display: inline-block;
  padding: 20px;
}

#nav_main {
  margin: 0;
  padding: 0;
}

#nav_main li {
  display: inline-block;
}

#nav_main li a {
  margin: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="samNan">
  <div class="wrap">
    <ul id="nav_main">
      <li class=""><a href="#">Menu 1</a></li>
      <li class=""><a href="#">Menu 2</a></li>
      <li class=""><a href="#">Menu 3</a></li>
      <li class=""><a href="#">Menu 4</a></li>
      <li class=""><a href="#">Menu 5</a></li>
      <li class=""><a href="#">Menu 6</a></li>
      <li class=""><a href="#">Menu 7</a></li>
      <li class=""><a href="#">Menu 8</a></li>
      <li class=""><a href="#">Menu 9</a></li>
      <li class=""><a href="#">Menu 10</a></li>
      <li class=""><a href="#">Menu 11</a></li>
      <li class=""><a href="#">Menu 12</a></li>
      <li class=""><a href="#">Menu 13</a></li>
      <li class=""><a href="#">Menu 14</a></li>
      <li class=""><a href="#">Menu 15</a></li>
    </ul>
  </div>
</div>