CODEWITHSUNDEEP
javascripthtmlcss
Radex
Radex

Reputation: 8577

How to make scrollable a div in a parent which use overflow-y?

I have the following script, text is masked inside a parent div. Currently, user needs to use the browser scrollbar on the parent div. I would like instead have the user just keeping pressed the mouse on the text, and when holding, dragging so it can be scrolled within the parent div.

Any idea how to solve this?

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

Upvotes: 0

Views: 56

Answers (1)

Slava Eremenko
Slava Eremenko

Reputation: 2506

I wrote a little bit of JavaScript to make this work for you! Btw it's called "drag scrolling" and you can find more answers and jQuery plugins for it.

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;
});

UPDATED.

Upvotes: 1

Related Questions