CSS scroll only overflow div, not the page

Question

I have a DIV with overflow:scroll and when i scroll the div and it comes to the bottom, it starts scrolling the main page.

I want it not to scroll the main page - just the div.

Is this possible?

https://i.sstatic.net/Owuu0.png

the image shows what i want NOT to happen

What do you mean by "and 'it' comes to the bottom"? Are you talking about the content of the div, or the scroll bar? — fvgs
– fvgs, Commented Oct 21, 2012 at 23:27
when i scroll the content of the div all the way to the bottom, it then starts scrolling the MAIN PAGE that it's on — nick
– nick, Commented Oct 21, 2012 at 23:27
Can you provide the code? Is the scroll bar for the entire page also visually moving as you scroll the div? — fvgs
– fvgs, Commented Oct 21, 2012 at 23:30
when you place your mouse inside the div and scroll, it scrolls the div. but when div reaches the bottom, it scrolls the whole page — nick
– nick, Commented Oct 21, 2012 at 23:31

para · Accepted Answer · 2013-09-19 06:15:29Z

I wrote this little plugin for jQuery and am using it for a while now. It does what you want, but not in CSS. Maybe it is a solution anyway:

(function($) {
    $.fn.privateScroll = function() {
        if ( this.length === 0 ) {
            return this;
        }
        this.bind('DOMMouseScroll mousewheel', function(e) {
                var delta = 0;
                if (typeof e.originalEvent.wheelDeltaY !== 'undefined') { // chrome, safari, opera
                    delta = e.originalEvent.wheelDeltaY;
                } else if (typeof e.originalEvent.wheelDelta !== 'undefined') { // ie
                    delta = e.originalEvent.wheelDelta;
                } else if (typeof e.originalEvent.detail != 'undefined') { // ff
                    delta = e.originalEvent.detail * -20;
                }
                if ( delta !== 0 ) {
                    $(this).scrollTop($(this).scrollTop() - delta );
                    e.preventDefault();
                    return false;
                }
        });
        return this;
    };
})(jQuery);

Use like this:

jQuery('SELECTOR').privateScroll();

UPDATE: updated with a coworkers code to work with all browsers

fvgs · Accepted Answer · 2012-10-21 23:31:40Z

0

Try using overflow: auto instead of scroll and see if that works.

answered Oct 21, 2012 at 23:31

fvgs

22.1k9 gold badges37 silver badges49 bronze badges

2 Comments

fvgs Over a year ago

I'll have to see the code in order to provide diagnostic assistance.

nick Over a year ago

theres a lot of code involved im pretty sure i can use js to solve this. i was just wondering if there was a quick CSS solution, but there probably isnt.

fvgs · Accepted Answer · 2012-10-22 00:04:32Z

0

I haven't tested this, but I believe you might be able to use this jquery code to solve the issue.

$(document).ready(function() {
   $('INNER DIV SELECTOR').hover(function() {
      $('INNER DIV SELECTOR').scroll(function(e) {
         e.stopPropagation();
      });
   });
});

answered Oct 22, 2012 at 0:04

fvgs

22.1k9 gold badges37 silver badges49 bronze badges

Comments

Swarnamayee Mallia · Accepted Answer · 2013-07-03 08:28:50Z

0

Check the following sites for your reference:

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/nested_scrollbars_demo.html

answered Jul 3, 2013 at 8:28

Swarnamayee Mallia

2,00814 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS scroll only overflow div, not the page

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related