rigor789/vue-scrollto

Scrolling canceled on triggering scroll with keyboard

Open

#130 opened on Mar 19, 2019

View on GitHub
 (1 comment) (10 reactions) (0 assignees)JavaScript (1,966 stars) (114 forks)batch import
enhancementhelp wanted

Description

With either:

<a href="#" v-scroll-to="'#anchor'">Scroll</a>

or triggering scroll programatically from click event:

<a href="#" @click="VueScrollTo.scrollTo('#anchro')">Scroll</a>

If the scroll is triggered using keyboard (enter button), the scroll will be canceled right after it started. This is because keyup event cancels scroll.

I know I can set cancelable: false but that's not ideal as it makes sense for some keys to cancel scroll (arrows, spacebar, escape).

Options for resolving this: a. Check only for specific buttons that should be able to cancel. b. Don't cancel if keyup matches the same button that triggered keydown (might be tricky as it's click event that triggers scroll typically). c. Maybe trigger scroll from delay ($nextTick?) so that it triggers after keyup event. d. ???

Contributor guide

Tech stack
javascriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic Vue.jsEvent handling knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the scroll to directive implementation, likely in src/ or similar. Look at how keyboard events are handled and where the scroll cancellation occurs. The issue suggests checking for specific keys or using $nextTick. Consider the options a, b, c provided. Check for any existing discussion in the comments (there is 1 comment) for additional context.