最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Scroll div instead of page - Stack Overflow

programmeradmin7浏览0评论

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?

Share Improve this question edited Sep 8, 2011 at 17:18 pimvdb 155k80 gold badges311 silver badges356 bronze badges asked Sep 8, 2011 at 14:41 Edd TurtleEdd Turtle 1,5311 gold badge13 silver badges24 bronze badges
Add a ment  | 

1 Answer 1

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;
});
发布评论

评论列表(0)

  1. 暂无评论