Limitations

Vue Horizontal implementation has over 99% cross browser compatibility with 3 known non-breaking limitations. To help you make informed decision and understand the library limitations, here is a list of up-to-date browser support tables.

CSS Scroll Behavior: Smooth

In Vue Horizontal, smooth scrolling is enabled by default. With scroll-behavior: smooth, it enables smooth scrolling experience when scroll event is triggered by programmatic calls. Although this is not a breaking functional feature, it provides a "smooth" scrolling user experience.

As of December 2020, there is only a 76% cross browser compatibility. Browser that are not compatible are largely Safari users. Safari users uses there trackpad or hand to touch scroll, and that has its accompanying scroll physics engine. The incompatibility and poor UX is only observed if programmatic scrolling is done. The feature is shipped in Safari 14 but blocked behind a feature gate, meantime you should polyfill this feature with more information below.

• 89%+ = 76% + 12% (iOS Safari) + 1% (Opera Mini)
  • Not affected because it's supported, or they are using touch based scrolling.
  • <10% (Safari and IE) of potential bad user experience.
  • The percentage are 2x higher in US and EU, more Safari users there.
• In the meantime, you should polyfill this.
• Polyfill should be done by you, there are no plans to incorporate this natively in the library.

Smoothscroll Polyfill

I recommend installing this smoothscroll polyfill created by @iamdustan. Then, have it polyfill once on the client side.

Installing

npm i smoothscroll-polyfill

yarn add smoothscroll-polyfill

Polyfill Examples

The idea is to have it polyfill-ed on the client side, the examples here are not exhaustive. It must only be added on the client side or else your SSR/SSG will break.

// The same place you might do this:
// import Vue from 'vue';

import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();

// nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/smoothscroll.client.js',
    // or
    {src: '~/plugins/smoothscroll.js', mode: 'client'},
  ]
}

// smoothscroll.js or smoothscroll.client.js
import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

<template>
  <vue-horizontal>
    <!-- your code -->
  </vue-horizontal>
</template>

<script>
export default {
  mounted() {
    // Load it only at client side, this is a bad example...
    require('smoothscroll-polyfill').polyfill();
  }
}
</script>

<script src="https://unpkg.com/smoothscroll-polyfill"></script>

CSS Scroll Snap

Scroll snap align or scroll-snapping, is a CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap positions. Vue Horizontal has it enabled by default to disable you can set <vue-horizontal snap="none">. As of December 2020, there is a 94%+ cross browser compatibility.

Hiding scrollbar

In Vue Horizontal, the x-axis scrollbar is hidden by default. Although there isn't a shared specification, most browser has it implemented one way or another. All available methods to hide the scrollbar is implemented in this library. You can expect 99%+ cross browser compatibility.