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)

Parotitis

I tried an using window.onscroll to capture the event. It kind of works but definitely wonky. Have a look at my jsfiddle. Only posting it here because maybe just maybe it will spark an idea in someone's mind. – Contraoctave

one min im working on a fiddle for your update – Mir

i posted an answer to your update – Mir

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).

Mccutchen

The scripting part is not the problem. The site won’t be useless without this feature, after all. It’s bad though, if it is particularly messy. I don’t want to introduce numerous bugs without knowing what I’m doing. – Parotitis

Accepting this because it is the only solution without side effects. – Parotitis

which solution? – Inger

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>

Oread

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 :-)

Mir

I think the main problem with all approaches waiting for a scroll event is: they won’t work when body does not scroll. – Parotitis

There will only be a $(window).scroll event, when there is a ‘physical’ scroll of the body. When the body is small enough to fit the screen, nothing happens. – Parotitis

Answer 4

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

Frames - W3Schools Reference

Ambrosia

Frames and W3Schools in the same answer? :P – Mccutchen

It was a challenge to get them both in ;P – Ambrosia

The link does not really show, how I would achieve this with frames. But since it is not an option anyway, I don’t really need to know. ;) – Parotitis

@Parotitis You would just set the height of the frame with CSS and if the page included in it requires it, then the scrollbar will automatically appear :) but okay, goos luck getting it done. – Ambrosia

The scrollbar appears perfectly with a pure div solution. The problem is, that I want to scroll it without hovering it. – Parotitis

@Parotitis Pardon me, I misunderstood. – Ambrosia

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.

Inglis

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

Internist