CSS restrict overflow: scroll to selected element

Question

I'm not sure if this is a browser issue but in Webkit browsers, I have a div with the following CSS:

.fixed_box {
    position: fixed;
    top: 100px;
    height: 200px;
    width: 200px;
    overflow-y: scroll;
}

When you scroll inside that div and you hit the top of that div, the rest of the page starts to scroll as well if there are overflowing elements, but I haven't scrolled there.

I need to set it so that only .fixed_box will scroll when my mouse is inside and scrolling.

Thanks

i have generated one jsfiddle.net/bLXux/show , no issue at all... — SaurabhLP
– SaurabhLP, Commented Jun 19, 2014 at 3:51
That is the normal (and expected) behavior. How else would users access the content that is not in the .fixed-box div that was outside the viewport? — steveax
– steveax, Commented Jun 19, 2014 at 6:51

Suresh Ponnukalai · Accepted Answer · 2014-06-20 05:20:40Z

1

You can use mousewheel and DOMMouseScroll function to achieve this. Add the following jquery in your code.

$('.fixed_box').on('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;

if (e.type == 'mousewheel') {
    scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
    scrollTo = 40 * e.originalEvent.detail;
}

if (scrollTo) {
    e.preventDefault();
    $(this).scrollTop(scrollTo + $(this).scrollTop());
}
});

Explanation:

Here I have used two type of function because in jQuery 1.7+, the detail property is not available at the jQuery Event object. So, we need to use event.originalEvent.detail to for this property at the DOMMouseScroll event. This method is backwards-compatible with older jQuery versions.

Coming to inside part, It is actually getting the values of mousewheel height, it means when you use your mouse up or down how much height it should go up and down of particular div. I am using preventDafault function which will execute all the time so that the default action of this event will not be triggered. So that i am manually moving my scroll up and down using the bottom line calculation.

The if condition is checking whether we are getting value or not using mousewheel function. If we are not getting values, it will be a "null" value. So that bottom preventDefault and positioning won't work.

Have a Fiddle!!

edited Jun 20, 2014 at 5:20

answered Jun 19, 2014 at 7:22

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2028856 Over a year ago

thanks a lot for the answer. Are you able to briefly explain what this code does? Thank You :)

Suresh Ponnukalai Over a year ago

I have added my explanation in the answer. By the way you should not ask like "are you able to briefly explain". It looks like you are thinking i am a fool.

user2028856 Over a year ago

Thanks a lot. But I was trying to be polite, I mean if I just asked you directly it might sound really demanding for some people

misterManSam · Accepted Answer · 2014-06-19 06:56:01Z

0

As has been said in the comments, how will users access the content without scrolling? Here is the answer though :)

overflow: hidden; on the body.

Have a fiddle

CSS

body { margin:0; padding:0; color:#fff; overflow: hidden; }

#wrapper { background:#000; }
.fixed_box {
    position: fixed;
    top: 100px;
    height: 200px;
    width: 200px;
    overflow-y: scroll;
    background:#f00;
}

edited Jun 19, 2014 at 6:56

answered Jun 19, 2014 at 6:44

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

4 Comments

NoobEditor Over a year ago

in my experience overflow: hidden; just hides the mess rather than cleaning it! :)

misterManSam Over a year ago

In this case it's hiding the body, which is already hidden by the viewport :)

misterManSam Over a year ago

It is a weird request though!

user2028856 Over a year ago

This doesn't really solve my problem because I need both areas to be scrollable, just when one scrolls, the other one doesn't. I think the javascript answer below might be more useful for me. Thanks for the help guys :)

Collectives™ on Stack Overflow

CSS restrict overflow: scroll to selected element

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related