Vue UI Components Documentation

Sets or gets whether the scrollbar is disabled.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :disabled="true"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets height of the scroll bar.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :largestep="100"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's minimum value.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :min="20" :value="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's maximum value.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :max="100" :value="50"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :rtl="true"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :step="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :showButtons="false"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Specifies the scrollbar thumb's minimum size.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :thumbMinSize="30"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :theme="'material'"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's orientation.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="20" :height="180" :vertical="true"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets the scrollbar's value.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20" :value="200"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

Sets or gets width of the scroll bar.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxScrollBar.

<template>
  <JqxScrollBar ref="myScrollBar" @valueChanged="onValueChanged($event)"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    },
    methods: {
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    },
    mounted: function () {
      this.$refs.myScrollBar.destroy();
    }
  }
</script>

Returns true, if the user is scrolling. Otherwise, returns false.

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    },
    mounted: function () {
      const value = this.$refs.myScrollBar.isScrolling();
    }
  }
</script>

Sets the thumb's position

<template>
  <JqxScrollBar ref="myScrollBar"
    :width="180" :height="20"
  />
</template>
 
<script>
  import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
 
  export default {
    components: {
      JqxScrollBar
    },
    mounted: function () {
      this.$refs.myScrollBar.setPosition(10);
    }
  }
</script>