如果div内容溢出，则水平滑动滚动（不滚动条）

Question

我想创建一个带有CSS的div（最好没有任何库），如果div的内容大于div宽度，则可以在鼠标单击时向右/向左滑动内容。如下所示：

我尝试使用溢出滚动，但这给出了一个不是我想要的滚动条。是否可以使用CSS和JavaScript（我在我的应用程序中使用的AngularJS）组合创建它，而不使用任何其他库？我可以使用jQuery，如果可以使用它。

更新：在@ Shnibble的回答后创建working demo。

$("#left").mousedown(function() {
  var y = $("#content").offset();
  $("#content").animate({
    left: 0
  }, function callback() {
      $("#left").fadeOut();
  });

});

$("#right").mousedown(function() {
  var y = $("#content").offset();
  $("#left").show();
  $("#content").animate({
    left: y.left - 200
  });
  $("#info").text(y.left - 100);
});

Answer 1

我不确定我确切知道你想要什么，你想要＆lt;＆gt;滚动内容的箭头还是要点击+左右拖动内容？两者都可以通过JQuery完成。

前者可以通过将父容器定位为relative并将content定位为absolute来完成。然后，您可以使用JQuery来更改left +/-的content偏移量，具体取决于单击的箭头。

对于后者，您将执行相同的设置，但在单击时检查鼠标坐标并将差异应用于content left属性，直到释放鼠标按钮。

至于只有在内容溢出时才会发生所有这些，你需要再次使用JQuery进行检查以测量content的宽度并将其与父容器进行比较，并且仅允许其中一个如果content更宽，则运行以上函数。

或者，您可以使用overflow-x: auto，然后设置滚动条的样式以更好地适应您的主题？见这里：https://css-tricks.com/custom-scrollbars-in-webkit/。