如何在使用overflow-y的父级中使div可滚动？

Question

我有以下脚本，文本在父div中被屏蔽。目前，用户需要使用父div上的浏览器滚动条。相反，我希望用户只需将鼠标按在文本上，并在按住时拖动，以便可以在父div中滚动。

你知道怎么解决这个问题吗？

​

/* html, body {
    height:100%;
} */

.message_wrap {
  height: 500px;
}

.message_box {
  border: 1px solid #bbb;
  background-color: #B0E0E6;
  padding: 10px;
  width: 350px;
  max-height: 20%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.message {
  border: 1px solid black;
  background-color: #fff;
  padding: 10px;
}

<div class="message_wrap">
  <div class="message_box">
    <p class="message">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
    <p class="message">Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
    <p class="message">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
  </div>
</div>

​

Answer 1

我写了一小段JavaScript代码，让你可以使用它！顺便说一句，它被称为“拖动滚动”，你可以找到更多的答案和jQuery插件。

https://jsfiddle.net/ohLctdyj/18/

var curYPos,
    curDown,
    curScroll,
    message_wrap = $(".message_box")[0];

window.addEventListener('mousemove', function(e) {
console.log(e);
  if (curDown) {
    message_wrap.scrollTop = curScroll + (curYPos - e.pageY);
  }
});

window.addEventListener('mouseup', function(e) {
  curDown = false;
});

message_wrap.addEventListener('mousedown', function(e) {
  curYPos = e.pageY;
  curScroll = message_wrap.scrollTop;
  curDown = true;
  e.preventDefault();
  return false;
});

已更新。