Scrollbar

ITEM

Opinions

Scrollbar indicate to the users that the items can be horizontally scrolled.
- By default, navigation button is used in Vue Horizontal to indicate just that.
The opinionated view is to have scrollbar disabled by default, due to the poor user experience of dragging the bar.
- For mouse users, scrolling should be done with navigation button.
- For trackpad users, they can use touch scrolling.
- For mobile touch screen user, they can use touch scrolling.

Customizing

Nevertheless, if you insist on using it, here is how you can customise it with webkit.

ScrollBar.vueimport=design/design-scrollbar-customize.vue

<template>
  <vue-horizontal responsive scroll :button="false" class="horizontal">
    <placeholder-component v-for="i in [0,1,2,3,4,5,6,7,8,9,10]" :key="i">
    </placeholder-component>
  </vue-horizontal>
</template>

<style scoped>
.horizontal >>> .v-hl-container {
  /* Space between content and scrollbar */
  padding-bottom: 16px;

  /* For firefox only */
  scrollbar-width: thin;
  scrollbar-color: orangered black;
}

.horizontal >>> .v-hl-container::-webkit-scrollbar {
  height: 16px;
  width: 16px;
  background: transparent;
}

.horizontal >>> .v-hl-container::-webkit-scrollbar-track {
  background: black;
  border-radius: 4px;
}

.horizontal >>> .v-hl-container::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 4px black solid;
  background: orangered;
}
</style>

Limitations

The selector: webkit only works on 90%+ of the browser.