网上的大多都是以document为外层滚动，本次封装的是对元素滚动
主要来源https://www.jianshu.com/p/2ad8c8b5bf75
<template>
<div class="pipe-analysis">
<el-row type="flex" class="row-content">
<el-col :span="4">
<ul class="scrollMenu">
<li v-for="(item,index) in selectList"
:key="item.first"
:class="{active: active===index}"
@click="scrollTo(index)">
{{ item.first }}</li>
</ul>
</el-col>
<el-col :span="20">
<el-scrollbar class="detail-scrollBar">
<div class="scrollContent">
<custom-collapse
v-for="(item,index) in selectList"
:key="index"
:fold="false"
:title="item.first"
class="safety-city-panel select-item">
<custom-test></custom-test>
</custom-collapse>
</div>
</el-scrollbar>
</el-col>
</el-row>
</div>
</template>
<script>
import { Scrollbar,Row,Col, } from 'element-ui';
import Collapse from '../../../components/collapse/collapse.vue';
import test from './test';
export default {
components:{
'el-row':Row,
'el-col':Col,
'el-scrollbar': Scrollbar,
'custom-collapse': Collapse,
'custom-test': test,
},
data() {
return {
dialogShow:false,
selectList:[
{
first:'介质短期危害性1介质短期危害性1介质短期危害性1介质短期危害性1',
second:'介质短期危害性1',
},
{
first:'介质短期危害性2',
second:'介质短期危害性2',
},
{
first:'介质短期危害性3',
second:'介质短期危害性3',
},
{
first:'介质短期危害性4',
second:'介质短期危害性4',
},
{
first:'介质短期危害性5',
second:'介质短期危害性5',
}
],
active:0,
contentDiv:null
};
},
mounted() {
// 监听滚动事件
this.contentDiv = document.querySelector('.el-scrollbar__wrap');
this.contentDiv.addEventListener('scroll', this.onScroll, true);
},
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
this.contentDiv.removeEventListener('scroll', this.onScroll);
},
methods: {
// 滚动监听器
onScroll() {
// 获取所有锚点元素
const navContents = document.querySelectorAll('.select-item');
// 所有锚点元素的 offsetTop
const offsetTopArr = [];
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop);
});
console.log(offsetTopArr)
// 获取当前文档流的 scrollTop
const scrollTop = this.contentDiv.scrollTop;
console.log(scrollTop)
// 定义当前点亮的导航下标
let navIndex = 0;
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是n了
if (scrollTop >= offsetTopArr[n]) {
navIndex = n;
console.log(navIndex ,n )
}
}
this.active = navIndex;
},
// 跳转到指定索引的元素
scrollTo(index) {
// 获取目标的 offsetTop
// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
const targetOffsetTop = document.querySelector(
`.select-item:nth-child(${index + 1})`
).offsetTop;
console.log(targetOffsetTop)
// 获取当前 offsetTop
let scrollTop = this.contentDiv.scrollTop;
// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
const STEP = 50;
// 判断是往下滑还是往上滑
if (scrollTop > targetOffsetTop) {
// 往上滑
smoothUp();
} else {
// 往下滑
smoothDown();
}
// 定义往下滑函数
function smoothDown() {
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
if (scrollTop < targetOffsetTop) {
// 如果和目标相差距离大于等于 STEP 就跳 STEP
// 否则直接跳到目标点，目标是为了防止跳过了。
if (targetOffsetTop - scrollTop >= STEP) {
scrollTop += STEP;
} else {
scrollTop = targetOffsetTop;
}
const oDiv = document.querySelector('.el-scrollbar__wrap');
oDiv.scrollTop = scrollTop;
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
requestAnimationFrame(smoothDown);
}
}
// 定义往上滑函数
function smoothUp() {
if (scrollTop > targetOffsetTop) {
if (scrollTop - targetOffsetTop >= STEP) {
scrollTop -= STEP;
} else {
scrollTop = targetOffsetTop;
}
const oDiv = document.querySelector('.el-scrollbar__wrap');
oDiv.scrollTop = scrollTop;
requestAnimationFrame(smoothUp);
}
}
},
onClose(){
this.dialogShow=false;
},
changeActive(index){
this.active = index;
}
},
};
</script>
<style lang="scss">
.detail-scrollBar{
height: 100%;
margin: 0 20px;
.el-scrollbar__wrap {
overflow-x: hidden;
margin-bottom: 0 !important;
}
}
</style>
<style lang="scss" scoped>
.pipe-analysis{
display: flex;
width: 100%;
height: 100%;
.row-content{
width: 100%;
.scrollMenu{
margin-top: 10px;
li{
margin-bottom: 24px;
padding-left: 10px;
color:rgba(0,0,0,0.85);
font-weight: bold;
&.active{
border-left: 2px solid #1890FF;
color: #1890FF;
}
}
}
.select-item{
width: 100%;
}
}
}
</style>
主要是对超长元素最外层固定宽高元素的滚动监听 ，scrollTop也是针对这个元素
切记!!无脑复制粘贴不加改动 肯定不行!!
网友评论