1

I am trying to only allow people to scroll through a drop-down list using the scroll-bar and prevent them from scrolling, by hovering over the entry at the top of the list.

You can see an example of a drop down list, which allows people to scroll through to the top of the list, by hovering over the first entry by looking at this Codepen.

<!-- https://codepen.io/Joshimoto/pen/qQLyoO -->

It would be great to only allow them to do this, by using the scroll bar, but at the same time not removing their ability to select an option from the list.

Any help or suggestions would be extremely helpful!

Josh Gomes
  • 193
  • 4
  • 16
  • You might consider putting the code of the pen in here as a snippet (CTRL-M when editing or click the snippet button) making it easier to assist you. Also please elaborate on other use cases such as keyboard down arrow etc. and how those should be handled. – Mark Schultheiss Nov 30 '18 at 15:52
  • Not sure how to include vue-select into the snippet, it seems to work on codepen though, that is why I used it. I am fine with people using arrow keys to navigate through the list with the scroll-bar and the arrow keys, but they just can't do it by hovering over the top entry of the list. – Josh Gomes Nov 30 '18 at 16:47

1 Answers1

1

I finally found a solution to this, VueSelect actually had a method, which was controlling this functionality.

After reading this GitHub ticket, I was able to disable the functionality using:

Vue.component('v-select', {
  extends: VueSelect,
  methods: {
    maybeAdjustScroll: () => false
  }
});

The developers for vue-select might add a prop for this later on, but for now this was the only approach I could find.

I hope this helps!

Josh Gomes
  • 193
  • 4
  • 16