Change scrolling from whole page to single div

Question

On my webpage when I click an element, modal window (div with fixed position) shows up. Problem is, that when I am scrolling using mouse scroll (or using finger on my phone/tablet), whole page is scrolling, and I want scrolling to be applied to content of the div (it has scroll bar) and stop scrolling the page. When the div is hidden, I want scorlling to switch back to whole page. Is it possible? I tried disabling scroll of body when I show div (jQuery):

$("body").css({"overflow", "hidden"})

but the only effect I get is that page scrollbar is being hidded, but still mouse scroll scrolls the whole page (behind the div I want to scroll).

Look here I think it's the same problem as yours http://stackoverflow.com/q/4887332/3374815 — EL OUFIR Hatim, Oct 14 '15 at 20:41
Live link of the page where you are facing this issue? or at least add HTML n CSS related to your problem — Xahed Kamal, Oct 14 '15 at 20:41

score 0 · Answer 1 · answered Oct 14 '15 at 20:43

0

Try looking into event bubbling so the parent scroll (body) isn't triggered when you try to scroll the div

https://api.jquery.com/event.stoppropagation/

answered Oct 14 '15 at 20:43

Benneb10

1,419
1
8
13

Change scrolling from whole page to single div

1 Answers1