vue项目如何套样式_vue 项目中自定义scroll样式

css3中可以设置滚动条的样式，但是兼容性一直被受争议，偶然看到一个css+js 的方式自定义一个滚动条，现在把他分享出来

感谢开源项目@vue-tiny-code

上代码

class="bar-vertical"

:style="{ height: `${sizeY}px`, transform: `translateY(${moveY}px)` }"

>

export default {

name: "custom-warp",

data() {

return {

moveY: 0,

moveX: 0,

sizeY: 15,

sizeX: 15,

};

},

computed: {

xBartranslate() {},

},

methods: {

handleScroll(event) {

const { wrap } = this.$refs;

this.moveY = (wrap.scrollTop / wrap.scrollHeight) * wrap.clientHeight;

this.moveX = (wrap.scrollLeft / wrap.scrollWidth) * wrap.clientWidth;

},

},

mounted() {

const { wrap } = this.$refs;

this.sizeY = (wrap.clientHeight / wrap.scrollHeight) * wrap.clientHeight;

this.sizeX = (wrap.clientWidth / wrap.scrollWidth) * wrap.clientWidth;

},

};

.scroll-bar {

overflow: hidden;

position: relative;

// border: 1px solid red;

}

.scroll-wrap {

overflow: scroll;

max-height: 280px;

margin-bottom: -17px;

margin-right: -17px;

}

.bar-wrap-vertical {

position: absolute;

right: 0;

width: 5px;

height: 100%;

background-color: red;

.bar-vertical {

width: 5px;

position: absolute;

cursor: pointer;

background-color: blue;

}

}

.bar-wrap-horizontal {

position: absolute;

bottom: 0;

width: 100%;

height: 5px;

background-color: red;

.bar-horizontal {

height: 5px;

position: absolute;

cursor: pointer;

background-color: blue;

}

}

父页面引用

{{ font }}

.demo-container {

width: 400px;

height: 400px;

margin: 5rem auto;

}

效果如下

image.png