vue:监听滚动条事件

由于某些原因，我不得不手工用ant design vue的a-row和a-col拼凑了一个表格，好不容易添加了水平滚动条，然后发现只要拖动滚动条，左表头未设置右边框的问题就被暴露了（为什么没有设置右边框呢？因为如果设置了右边框，就跟右边的表格线重复了，相当于2px的线条，很影响美观，不拖动滚动条的时候，这个问题被完美隐藏了）。

问题如下：

解决方法：

监听滚动条，为左表头动态添加右边框。

开始滚动后，添加右边框，滚动条恢复到最左边后，去掉右边框。

给事件的两位主角都加上id属性，以便于document找到它俩。

给滚动条添加监听：

 <a-col flex="auto" style="border: 0;overflow-x: overlay;" id='right' @scroll=handleScrollScroll()>

处理滚动监听：

methods: {handleScrollScroll(){document.querySelector("#left").style.borderRight = '1px solid';console.log(document.querySelector("#right").scrollLeft);if(document.querySelector("#right").scrollLeft==0){document.querySelector("#left").style.borderRight = '0';}},
}

改进后的效果：

vue:监听滚动条事件相关推荐

Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
vue监听滚动条事件
代码 ...省略...mounted() {// 监听页面滚动事件window.addEventListener("scroll", this.scrolling);}, meth ...
vue @scroll 监听滚动条事件
vue @scroll 监听滚动条事件为啥要使用 @scroll 监听滚动条事件没用在vue.js 开发前我们监听滚动条事件都是在window挂监听事件例如:window.onscroll = ...
Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...
vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
html页面滚动条监听事件,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
JS 监听滚动条事件
JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
html监听页面滚动高度,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...

vue:监听滚动条事件

vue:监听滚动条事件相关推荐

最新文章

热门文章