Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
IlyaSemenov opened this issue Nov 30, 2021 · 2 comments
Open

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

IlyaSemenov opened this issue Nov 30, 2021 · 2 comments

Comments

@IlyaSemenov
Copy link

IlyaSemenov commented Nov 30, 2021

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

  • v-dragscroll and v-dragscroll.x completely break (prevent) native vertical page scrolling on mobile. It's not possible to scroll the page by dragging elements inside the dragscroll container.
  • v-dragscroll.pass and v-dragscroll.pass.x allow vertical scrolling on mobile but lead to jerky experience on desktop when drag-scrolling the container with mouse (unintentional small vertical mouse drag is 'passed' to the body scroll container and makes the page jiggle)

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
Copy link

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

@IlyaSemenov
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants