element3/packages/scrollbar/util.js

A Component Library for Vue3

export const BAR_MAP = {
  vertical: {
    offset: 'offsetHeight',
    scroll: 'scrollTop',
    scrollSize: 'scrollHeight',
    size: 'height',
    key: 'vertical',
    axis: 'Y',
    client: 'clientY',
    direction: 'top'
  },
  horizontal: {
    offset: 'offsetWidth',
    scroll: 'scrollLeft',
    scrollSize: 'scrollWidth',
    size: 'width',
    key: 'horizontal',
    axis: 'X',
    client: 'clientX',
    direction: 'left'
  }
}

export function renderThumbStyle({ move, size, bar }) {
  const style = {}
  const translate = `translate${bar.value.axis}(${move.value}%)`

  style[bar.value.size] = size.value
  style.transform = translate
  style.msTransform = translate
  style.webkitTransform = translate

  return style
}