鼠标单击并拖动而不是水平滚动条（查看子 Div 的全部内容）

Question

我需要鼠标点击和拖动而不是水平滚动条。

当我点击并拖动应该在拖动方向左右移动的子 div 时。

任何带有 css 或 jquery/JS 的解决方案

我的代码：

.parent{
  width:300px;
  border:5px sold red;
  overflow:hihdden; 
  float:left;
}
.child{
  width:1000px;
  float:left;
  font-size:15px;
  font-family:arial;
  padding:10px;
}

<div class="parent">
    <div class="child">    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum        
        
    </div>
    
</div>

Answer 1

这可以用普通的 javascript 来完成。将鼠标 eventListeners 添加到要拖动的元素，捕获起点并计算鼠标移动的滚动 X 位置。拖动时，将此位置应用于您的子元素：

const slider = document.querySelector('.parent');
let mouseDown = false;
let startX, scrollLeft;

let startDragging = function (e) {
  mouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
};
let stopDragging = function (event) {
  mouseDown = false;
};

slider.addEventListener('mousemove', (e) => {
  e.preventDefault();
  if(!mouseDown) { return; }
  const x = e.pageX - slider.offsetLeft;
  const scroll = x - startX;
  slider.scrollLeft = scrollLeft - scroll;
});

// Add the event listeners
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);

.parent{
  width:300px;
  border:5px solid red;
  overflow-x: hidden; 
  float:left;
}
.child{
  width:1000px;
  float:left;
  font-size:15px;
  font-family:arial;
  padding:10px;
  cursor: pointer;
}

<div class="parent">
    <div class="child">    
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum        
    </div>
</div>

Answer 2

您可以使用 jquery UI 中的 .draggable() 函数。这是我根据您的代码创建的示例的链接。 更新代码 http://jsfiddle.net/3mh2b7rk/4/

jQuery("#child").draggable({ 
    cursor: "move", 
    containment: "parent",
    stop: function() {
      if(jQuery("#child").position().left < 1)
          jQuery("#child").css("left", "720px");
    }
});

.parent{width:300px; border:5px solid red; overflow:hidden; left:20px}
.child-container{width:1730px;left:-710px;position:relative;}
#child{ width:1000px; float:left; font-size:15px; font-family:arial; padding:10px 5px 10px 0;left:720px; border-right:4px solid red}
.clear {clear:both;}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="parent">
  <div class="child-container">
    <div id="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
    <div class="clear"></div>
  </div>
</div>