Always scroll a div element and not page itself

Question

I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?

Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.

The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).

Is this possible to achieve somehow?

Edit

I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)

The first image is how the page looks when opened.

Now, the mouse sits in the indicated position and scrolls and what should happen is that

• First the inner div scrolls its content (Fig. 2)
• The inner div has finished scrolling (Fig. 3)
• The body element scrolls so that the div itself gets moved. (Fig. 4)

Hope it is a bit clearer now.

(Image thanks to gomockingbird.com)

Answer 1

I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).

Answer 2

An option could be using the jQuery scroll plugin. I know it has the availability to create scrollbars on an div. The only thing you need to add yourself is the logic to catch the events when keyboard buttons are pressed. Just check out the keycodes for the arrow keys and make the div scroll down.

The plugin can be found here.

You can use it like this;

<script type="text/javascript">
  // append scrollbar to all DOM nodes with class css-scrollbar
  $(function(){
    $('.css-scrollbar').scrollbar();
  })
</script>

Answer 3

here is a solution that might work: (fiddle: http://jsfiddle.net/maniator/9sb2a/)

var last_scroll = -1;
$(window).scroll(function(e){
    if($('#content').scrollTop());
    var scroll = $('#view').data('scroll');
    if(scroll == undefined){
        $('#content').data('scroll', 5);
        scroll = $('#content').data('scroll');
    }
    else {
        $('#content').data('scroll', scroll + 5);
        scroll = $('#view').data('scroll');
    }
    /*
    console.log({
        'window scroll':$('window').scrollTop(), 
        'scroll var': scroll, 
        'view scroll':$('#view').scrollTop(),
        'view height':$('#view').height(),
        'ls': last_scroll 
    });
    //*/
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll
        last_scroll = $('#content').scrollTop()
        $('#content').scrollTop($('#content').scrollTop() + scroll);

        $(this).scrollTop(0);
        //console.log(e, 'scrolling');
    }

})

It is a bit buggy but it is a start :-)

Answer 4

The only way I believe you can achieve this is through the use of frames.

Frames - W3Schools Reference

Answer 5

If you just want to have a fixed positioned "div" and scroll only it, maybe you could use a trick like:

http://jsfiddle.net/3cpvT/

Scrolling with mouse wheel and all kinds of keys works as expected. Only thing is that the scrollbar is on the document body only.

Answer 6

I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.

CSS:

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

JS (jQuery):

if ($("body").height() > $(window).height()) {
    var top;
    $('#scrolldiv').mouseenter(function() {
        top = $(window).scrollTop();
        $('body').addClass('noscroll').css({top: -top + 'px'});
    }).mouseleave(function() {
        $('body').removeClass('noscroll');
        $(window).scrollTop(top);
    });
}

The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv