SSENSE/vue-carousel

Bug: Sliding on mobile causes whole page to slide.

Open

#380 创建于 2019年3月3日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)JavaScript (1,705 star) (513 fork)batch import
bughelp wanted

描述

Bug Report

Current Behavior When I slide the carousel on android, the carousel scrolls as expected - but I can also see typical indicators of the page not being able to scroll left anymore. image On iPhone, the same effect - the carousel scrolls but the whole pages "tries" to scroll left as well.

Input Code and steps to reproduce The bug is only reproducable on mobile!

You can see this on my github pages (but I think any instance of vue-carousel has the same feature).

  • { REMOVED }
  • Go to step 3 ("Determine the time"/"Bestem tidspunkt" - you can change the language)
  • Try to scroll the hours left/right
  • You'll see the whole page tries to move left/right as well.

Babel configuration

module.exports = {
    presets: ["@vue/app"]
};

Expected behavior/code I would like the page scrolling, while touching the carousel, to be disabled.

Environment

  • "@babel/core": "7.0.0-beta.47",
  • Node 8.9.1, NPM 5.5.1 (why is this relevant?)
  • OS: Windows 10

贡献者指南

技术栈
vuejavascript
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
basic Vue.js understandingfamiliarity with touch events
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
The bug occurs when swiping the carousel on mobile, causing the whole page to scroll. To fix, inspect the carousel's touch event handling in the Carousel.vue component. Likely the issue is that touch events are not being properly prevented from propagating. A common solution is to add `touch action: none` CSS to the carousel container, or call `e.preventDefault()` on `touchmove` events. Look at the existing event listeners for `touchstart`, `touchmove`, and `touchend` to ensure they are consuming the events. Test on a mobile device or emulator.
Bug: Sliding on mobile causes whole page to slide. · SSENSE/vue-carousel#380 | Good First Issue