安裝方式：

可以在npm官網找到;連接

npm install vue-scroll --save

演示地址：

官方演示地址連接：點擊這里

收獲：

css計算屬性calc();

vw,vh: 視圖可見寬度和高度；

event.currentTarget；

項目實踐：

這里是做個記錄，留給我自己看，這個組件怎么用，建議去看上面的演示地址，直接復制很多變量沒有，可能會報錯。

<template><div class="scroll_view"><div class="dashboard" @click="toTopC">scrollTop:{{ position.scrollTop }} ++ {{ positionProps }}</div><divv-scroll:throttle="{ fn: onScroll, throttle: 500 }"class="translate_content"id="orderFullScreen"ref="scrollref"@click="toTopC"><el-rowclass="scroll_content"v-for="(key, index) in dataListProps":key="index"><!-- 頭像 --><el-col :xs="3" :sm="2" :lg="1"><div class="speaker1"></div></el-col><!-- 文本 --><el-col :span="20"><div class="timeClick"><div><div class="td_user">&nbsp;&nbsp;<span class="speaker_text">Role1</span><span class="speaker_time">{{ key.startTime }}</span>&nbsp;<spanclass="el-icon-circle-check check_icon_color"></span></div><p class="audiot_style">&nbsp;&nbsp;<span>{{ key.content }}</span></p></div></div></el-col></el-row><el-row v-show="ssdataListProps[0]"><el-col :xs="3" :sm="2" :lg="1"><div class="speaker1"></div></el-col><el-col :span="20"><div><div class="td_user">&nbsp;&nbsp;<span class="speaker_text">Role1</span>&nbsp;<span class="el-icon-loading loading_icon_color"></span></div><p class="audiot_style">&nbsp;&nbsp;{{ ssdataListProps[0] }}</p></div></el-col></el-row><div style="height:5rem; width:1px"></div></div></div> </template><script> var translate_content = document.getElementsByClassName("translate_content")[0];export default {name: "scroll-view",//父組件穿過來的值props: ["dataListProps", "ssdataListProps", "positionProps"],data: function() {return {// orders,position: { scrollTop: 0, scrollLeft: 0 }};},methods: {onScroll: function(e, position) {console.log(e);console.log(position);this.position = position;},//可以通過event.currentTarget.scrollTop跳轉到相應位置toTopC(e) {console.log(e.currentTarget.scrollTop);event.currentTarget.scrollTop = 10;}},watch: {positionProps(n, o) {console.log(n, o);// return scrollTo(0, n);}},updated() {console.table("up:" + this.positionProps);},mounted() {// window.addEventListener("scroll", this.showBackTop, true);} }; </script><style lang="less" scoped> .scroll_view {width: calc(100vw - 3.1rem);margin: 0.8rem 0.24rem 0;overflow-y: hidden;overflow-x: hidden;position: relative;max-height: calc(100vh - 1.5rem); }.dashboard {position: absolute;top: 0px;left: 0;width: 100%;height: 12px;padding: 0 16px;line-height: 32px;color: #000;// background-color: #fff;text-align: left;z-index: 1; } .el-input__inner {font-size: 0.14rem; } .check_icon_color {color: #2185ff;font-size: 0.14rem; } .translate_content {background-color: #fff;width: calc(100vw - 3.55rem);max-height: calc(100vh - 2rem);padding: 0.8rem 0 2rem 0.6rem;overflow-y: auto;overflow-x: hidden;list-style: none;color: #2185ff;font-size: 0.18rem;font-size: 14px;.speaker1,.speaker2 {width: 0.44rem;height: 0.44rem;}.speaker1 {background: url("../assets/icon_role01_nor@2x.png") no-repeat center;background-size: 100%;}.speaker2 {background: url("../assets/icon_role02_nor@2x.png") no-repeat center;background-size: 100%;}.speaker_text {background-color: rgba(255, 255, 255, 0);font-size: 0.18rem; // font-family: PingFang-SC-Bold;font-weight: bold;color: #333333;}.speaker_time {display: inline-block;margin-left: 0.2rem;font-size: 0.14rem;font-weight: bold;color: #999999;}.audiot_style {color: #333333;font-weight: 500;font-size: 0.18rem;font-family: PingFang-SC-Medium;} }.allfile {text-align: left; background-color: #eceef2;width: 98%;height: 100%;.audiotext_style {color: #409eff !important;}tr td {text-align: left;background: #eee;height: 0.3rem;padding: 0.1rem;}.el-tag--info {background-color: rgba(255, 255, 255, 0);}.el-tag {color: #999;border: none !important;font-size: 0.14rem;font-weight: bold;color: #999999 !important;} }.el-switch {margin-top: 0.05rem; }.el-icon-d-arrow-left {background-color: rgba(200, 200, 200, 0); }.el-icon-d-arrow-right {background-color: rgba(200, 200, 200, 0); } @media screen and (max-width: 768px) {.scroll_view {overflow: hidden;width: 100%;margin: 0.8rem 0;}.translate_content {width: 100%;padding: 0.6rem 0.2rem;} } </style>

總結

以上是生活随笔為你收集整理的vue-scroll滚动组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。