javascript - Scroll div instead of page - Stack Overflow

admin管理员组

文章数量:1323035

I have a lightbox of sorts on a website I am working on which acts like a "View Source" button. The background goes dark and the source appears but will only scroll if you have your mouse over that particular div (or in this case pre). I want to able to, for example, have my mouse in the top corner of the page and scroll down and I want the main lightbox to scroll. There's loads of code so I've used:

overflow-x: hidden;
overflow-y: scroll;

I'm sure it will require some JavaScript or jQuery, but I've no idea where to being.

It's in oporation on this page when you scroll down and click 'View Full Code'.

Any ideas?

I have a lightbox of sorts on a website I am working on which acts like a "View Source" button. The background goes dark and the source appears but will only scroll if you have your mouse over that particular div (or in this case pre). I want to able to, for example, have my mouse in the top corner of the page and scroll down and I want the main lightbox to scroll. There's loads of code so I've used:

overflow-x: hidden;
overflow-y: scroll;

I'm sure it will require some JavaScript or jQuery, but I've no idea where to being.

It's in oporation on this page when you scroll down and click 'View Full Code'.

Any ideas?

• javascript
• jquery
• css
• scroll
• lightbox

Share Improve this question Follow edited Sep 8, 2011 at 17:18 pimvdb 155k8080 gold badges311311 silver badges356356 bronze badges asked Sep 8, 2011 at 14:41 Edd TurtleEdd Turtle 1,53111 gold badge1313 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The most straight-forward way would be: http://jsfiddle/pimvdb/Ezvnp/3/.

$('body').bind('mousewheel', function(e) { // on scroll
    var $div = $('div');

    // set div scroll top offset to current + extra from this scroll
    $div.scrollTop($div.scrollTop() 
                    - e.originalEvent.wheelDelta);

    return false; // prevent body scrolling
});

To lock/unlock the scrolling, you could use a variable so as to only lock when that variable is true, e.g.: http://jsfiddle/pimvdb/Ezvnp/4/.

var locked = true;

$('body').bind('mousewheel', function(e) {
    if(locked) {
        var $div = $('div');

        $div.scrollTop($div.scrollTop() 
                        - e.originalEvent.wheelDelta);

        return false;
    }
});

$('button').click(function() {
    locked = !locked;
});

本文标签： javascriptScroll div instead of pageStack Overflow