javascript - 如何在使用 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;
});

已更新。