js小技术总结

135 阅读1分钟

前言

主要是关于一些实现方案的总结

下拉框点击其他区域消失

1.给盒子上添加一个ref

<div class="courseSelect" ref="currentSelect" :style="{width: width + 'px'}">
</div>

2.在document上增加一个点击事件,如果点击的不是内容区域里的,就隐藏元素

e => {
    if (this.$refs.currentSelect && !this.$refs.currentSelect.contains(e.target)) {
      this.show && (this.show = false)
    }
}

滚动到指定位置

const aaa = document.getElementById('aaa');
// 1.获取需要滚动元素距离顶部的位置
const scrollTopValue = aaa.getBoundingClientRect().y
// 2.设置元素滚动的高度
document.querySelector('.ListScroll').scrollTop = scrollTopValue

注意:被设置scrollTop的元素必须是有滚动条的,就是监听的滚动事件必须是有滚动条的 例如:当前div高度100px,内容大于100px才会产生滚动条

图片上传