Question

我有以下脚本，文本被掩盖在父div中。目前，用户需要使用父div上的浏览器滚动条。我希望用户只需将鼠标按在文本上，然后按住，拖动即可在父div中滚动。

知道如何解决这个问题吗？

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我写了一些JavaScript来让这个适合你！顺便说一句，它被称为＆＃34;拖动滚动＆＃34;你可以找到更多的答案和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;
});

更新。

如何在父类中使用overflow-y滚动div？

1 个答案: