CODEWITHSUNDEEP
javascriptjqueryhtmlcss
don KR
don KR

Reputation: 31

How to make to scroll on mouse position div only?

I want to prevent scrolling other DIV of scrolling DIV.

HTML:

<div id="body">
  <div class="long">
    <div class="half-height" style="background-color:blue"></div>
    <div class="half-height" style="background-color:yellow"></div>
  </div>

  <div id="left-side" class="side">
    <div class="long">    
        <div class="half-height" style="background-color:red"></div>
        <div class="half-height" style="background-color:green"></div>
    </div>
  </div>
<div>

  <div id="right-side" class="side">
    <div class="half-height" style="background-color:black"></div>
    <div class="half-height" style="background-color:white"></div>
  </div>
</div>

CSS:

#body {
  height:300px;
  width:300px;
  background-color:white;
  overflow:auto;
  position:relative;
}

.long {
  height:500px;
}

.half-height {
  height:50%;
}

.side {
  height:100%;
  position:absolute;
  width:30%;
  background-color:white;
  top:0;
  overflow:auto;
}

#left-side {
  left:0;
}

#right-side {
  right:0;
}

  1. Left-side DIV have to scrollable without body scrolling. (When left-side's scrollbar touch to end, body start to scroll, I want to fix this)

  2. When I wheel scroll in right-side DIV, body is not to be scrolled

Here's my fiddle https://jsfiddle.net/vuju6pgb/

Upvotes: 2

Views: 2555

Answers (1)

Neville Nazerane
Neville Nazerane

Reputation: 7019

You can add a css on the mouseenter event to set the overflow to hidden and switch it back go auto on the mouseleave event.

$("#left-side").mouseenter(function(){
    $("#body").css("overflow", "hidden");
}).mouseleave(function(){
    $("#body").css("overflow", "auto");
});

You can do the same with #body and body as well.

Here is the updated fiddle https://jsfiddle.net/vuju6pgb/4/

Upvotes: 2

Related Questions