JS垂直以及横向滚动条精确定位居中某一元素

ref为task的就是我们要操作的容器， 绑定好id和ref

绑定事件

const scroll = document.getElementById(‘crossScroll’);

scroll.addEventListener(‘scroll’, debounce(this.handleScroll, 500, { leading: true }), true);

计算距离

// 等差数列求居中, 页面中每多容纳一个元素就要减少0.5个元素

// 三个参数分别为: 初始值，个数， 以及差值

arithmeticSequence(init, num, change) {

return init + (num - 1) * change;

},

// 定位到任务

scrollToTask() {

const location = 5;

// 页面固定每一个元素marginLeft为36

const marginLeft = 36;

const item = this.$refs.kanbanItem[location].clientWidth + 36;

const itemLeft = this.$refs.kanbanItem[location].offsetLeft;

const windowWidth = this.$refs.tasks.clientWidth;

const showNum = windowWidth / item;

// 窗口大小小于等于元素时可以不用处理居中，直接使用距左距离即可

const scrollLeft = windowWidth <= item ? itemLeft : itemLeft

• this.ar