donmbelembe / vue-dragscroll

A vue directive to make a scrollable element scroll by draging to the scroll direction
https://vue-dragscroll.clebinfosys.com/
MIT License
258 stars 32 forks source link

Native mobile vertical page scrolling is broken with .x #96

Open IlyaSemenov opened 2 years ago

IlyaSemenov commented 2 years ago

The use case is, I have a horizontal scrolling div which turns to vertical non-scrollable with mobile viewport media rules.

I would expect v-dragscroll.x to completely ignore/pass 'as is' all vertical events. Currently, they are either lost (without .pass) or converted from drag to scroll (with .pass).

Shnrqpdr commented 2 years ago

I have the same problem. @IlyaSemenov do you know a solution for this? Any progress?

IlyaSemenov commented 7 months ago

Here's my quick workaround:

    target.mm = function (e: TouchEvent) {
      const isMouseEvent = e instanceof window.MouseEvent
      let newScrollX, newScrollY
      if (pushed) {
        // pushed
        if (!binding.modifiers.x && !binding.modifiers.y) { // <-------------
          e.preventDefault()
        }

and then:

          // disable one scroll direction in case x or y is specified
          if (binding.modifiers.x) {
            newScrollY = -0
            if (newScrollX) { // <--------------
              e.cancelable && e.preventDefault()
            }
          }
          if (binding.modifiers.y) {
            newScrollX = -0
            if (newScrollY) { // <--------------
              e.cancelable && e.preventDefault()
            }
          }

I'm not sure if I want to create a PR, the library is not maintained, the code quality is rather poor, there are lots of stray code/weird types. Perhaps it's better to rewrap this under new name.