鼠标单击并拖动而不是水平滚动条(查看子Div的完整内容)

Question

我需要鼠标单击并拖动而不是水平滚动条.

当我单击并拖动应该向左/向右移动的子div时拖动方向.

演示链接

任何使用css或jquery/JS的解决方案

我的css代码:

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

Answer 1

您可以使用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>

Answer 2

这可以用普通的 javascript 来完成。将鼠标事件侦听器添加到要拖动的元素，捕获起点并计算鼠标移动的滚动 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 3

简单的拖动滚动

虽然迟到了，但这里有一个更简单的解决方案（适用于桌面和移动设备），它使用指针事件、Event.movementX正确分配事件window和可滚动元素以及 CSStouch-action: none;

const pointerScroll = (elem) => {

  let isDrag = false;
  
  const dragStart = () => isDrag = true;
  const dragEnd = () => isDrag = false;
  const drag = (ev) => isDrag && (elem.scrollLeft -= ev.movementX);
  
  elem.addEventListener("pointerdown", dragStart);
  addEventListener("pointerup", dragEnd);
  addEventListener("pointermove", drag);
};

document.querySelectorAll(".parent").forEach(pointerScroll);

.parent {
  width: 300px;
  border: 5px solid red;
  overflow: hidden;
  touch-action: none; /* Add also this */
}

.child {
  width: 1000px;
  padding: 10px;
}

<div class="parent">
  <div class="child">
    <b>Click, hold and move pointer</b>. 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>