Question

I have a div with a fixed height and overflow-y : scroll which I am loading via ajax. I’m currently looking for a possibility to scroll the content inside the div (using the mouse wheel) but without displaying the scroll bar. Can anyone help?

Answer 1

Another way is to use jquery.mousewheel : https://github.com/brandonaaron/jquery-mousewheel

On mouse wheel, compute scroll urself :

$('.toScroll').on('mousewheel',function(event, delta, deltaX, deltaY){
    if(!$(this).attr('data-scrolltop')){
        $(this).attr('data-scrolltop',0);
    }
    var scrollTop = parseInt($(this).attr('data-scrolltop'));
    scrollTop += (-deltaY * lineHeight);
    $(this).attr('data-scrolltop',scrollTop);
    $(this).scrollTop(scrollTop);
});

I made a Fiddle as a demonstration :
http://jsfiddle.net/W2pZB/

The only problem is about the var-fixed line height.