with overflow-y:scroll;. Links to anchors inside innerContent are locate...">
Geek asks and answers

Scrolling in a div without moving a page

I have <div id="innerContent">with overflow-y:scroll;. Links to anchors inside innerContent are located on the parent page, not in div.

So far I have tried snapping and scrolling to try to scroll through the contents. They complete the scrolling, but the height of the innerContent is greater than the browser window, so the entire parent page also scrolls to the anchor when clicking links.

Is there a way to do this using javascript without moving the parent page? I have no control over div height - this is someone else design.

This is close ... but there is no answer here. How to automatically scroll inline div without scrolling the whole page?

Thank!

+3
source share
5

jsfiddle Chrome . .

mousewheel, , . , .

$('#scroll').bind('mousewheel', function(e){

    $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);

    //prevent page fom scrolling
    return false;    
});
+12

. this jsfiddle . css. javascript.

+3

, : . JS:

container.addEventListener('mousewheel', function(e) {
    var scrollingOverTheTop = (e.wheelDelta > 0 && this.scrollTop == 0);
    var scrollingOverTheBottom = (e.wheelDelta < 0 && (this.scrollTop >= this.scrollHeight - this.offsetHeight));
    if (scrollingOverTheBottom || scrollingOverTheTop) {
        e.preventDefault();
        e.stopPropagation();
    }
}, true);
+2

javascript ( , KooiInc, js, ), event.cancelBubble = true, , -div. , , event.preventDefault(), ( ) .

+1

, CSS :

body.scroll_locked {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

Then, when I show my modal / lightbox, which is JavaScript (jQuery), I add the scroll_locked class to the body to lock it in place and remove the class to return. It looks like you could do the same for the mouseenter / mouseleave event for the div, which is always on the page, and you want to have the same effect.

$('body').addClass('scroll_locked');
$('body').removeClass('scroll_locked');
0
source

More articles:


All Articles