How to only allow scrolling with scroll-bar

Question

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!

Answer 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!