I have a block with overflow: auto And there is horizontal scrolling. Is it possible to make it so that when you hover at it with a mouse and turn it with a wheel, it will scroll?

What attribute html5 can? If you need JS, then better jQuery

Thank you in advance!

    2 answers 2

    catch the scroll with the mousewheel and move with: element.scrollLeft

    • @ inferus-vv jsfiddle.net/Scfe2 - lampa
    • I used to want in this case, another wheel to the mouse, somewhere on the side, to scroll with my thumb. - Smash
    • Here is an example of how to catch mouse wheel events. I think that having understood it, you will not have problems with the implementation of your task. - Deonis
    • @lampa Hmm .. It seems to work, but there is a problem that the whole site will still scroll down. - inferusvv
    • @ inferus-vv add to handler: return false; - lampa

    "honest horizontal scrolling" - we drag an invisible window behind the mouse, with an internal height equal to the internal width of what we will scroll horizontally. http://jsfiddle.net/oceog/DcyWD/

    CSS:

     #pass { position: fixed; top: 0px; width: 1px; height: 1px; background: black; opacity: 0; overflow-x: scroll; z-index: 10000; } #inner { height: 10000px; } #text { width: 10000px; }

    Js:

     var pass=$('#pass'); //пропускаем нажатия мыши, чтобы можно было выделять текст pass.mousedown(function(e) { console.log(e); $this=$(this); $this.css('z-index','-1000'); $('document').trigger(e); $(document).mouseup(function(e) { console.log(e); $this.css('z-index','1000'); }) }); $(document).mousemove(function(e,d){ pass.css('top',e.clientY); pass.css('left',e.clientX); }) pass.scroll(function(){ console.log(pass.scrollTop()); $('body').scrollLeft(pass.scrollTop()); })

    another example, something similar - turning the vertical position of an element into css attributes

    http://jsfiddle.net/oceog/QrWSb/

    I tested both examples only in chrome, I think there’s still a problem with the zoom, maybe