Home/ Questions/Q 8318039
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T21:48:59+00:00

Is there a way in javascript to bind an event handler to a horizontal

  • 0

Is there a way in javascript to bind an event handler to a horizontal scroll as opposed to the generic scroll event which is fired when the user scrolls horizontally and vertically? I want to trigger an event only when the user scrolls horizontally.

I searched around for an answer to this question, but couldn’t seem to find anything.

Thanks!

P.S. My apologies if I’m using some terminology incorrectly. I’m fairly new to javascript.

UPDATE

Thanks so much for all your answers! In summary, it looks like you are all saying that this isn’t supported in javascript, but I that I can accomplish the functionality with something like this (using jQuery) (jsFiddle):

var oldScrollTop = $(window).scrollTop();

$(window).bind('scroll', function () {
    if (oldScrollTop == $(window).scrollTop())
        //scrolled horizontally
    else {
        //scrolled vertically
        oldScrollTop = $(window).scrollTop();
    }
});​

That’s all I needed to know. Thanks again!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Answering from my phone, so unable to provide code at the moment.

    What you’ll need to do is subscribe to the scroll event. There isn’t a specific one for vertical/horizontal.

    Next, you’ll need to get some measurements about the current display area. You’ll need to measure the window.clientHeight and window.clientWidth.

    Next, get window.top and window.left. This will tell you where position of the viewport is, ie if it’s greater than 0 then scroll bars have been used.

    It’s pretty simple math from here to get what you need. If no one else has provided a code example in the next few hours I’ll try to do so.

    Edit:
    A bit further information.

    You must capture the scroll event. You also need to store the initial window.top and window.left properties somewhere. Whenever the scroll event happens, do a simple check to see if the current top/left values differ from the stores value.

    At this point, if either are different you can trigger your own custom events to indicate vertical or horizontal scrolling. If you are using jQuery, this is very easy. If you are writing js without library assistance, it’s easy too but a little more involved.

    Do some searches for event dispatching in js.

    You can then write any other code you want to subscribe to your custom events without needing to tie them together with method calls.

    • 0