Scrolltop

遇到问题container.scrollTop 一直为0不能赋值 watch: { historyList () { this.$nextTick(() => { const container = this.$el.querySelector(’.scrolldivmain’) console.log(container.scrollHeight) console.log(container.scrollTop) this.$refs.scrolldiv.scrollTo(0, container.scrollHeight + ‘px’) container.scrollTop = container.scrollHeight container.scrollTop(0, container.scrollHeight) console.log(container.scrollTop) // container.scrollTop 一直为0 }) } }注意点确定下滚动条是在哪里显示的 有个方法判断下： window.addEventListener(‘scroll’, () => { var scrollTop = this.$el.querySelector(’.scrolldivmain’) // console.log(scrollTop.scrollHeight) console.log(scrollTop.scrollTop) // 查看打印的值是否有变化 如果有 则说明滚滚动条在这个标签中 // scrollTop.scrollTop = scrollTop.scrollHeight // 可以尝试下 滚动滚动条。一直在底部则可以设置成功 }, true)解决方案需要用到的地方 调用this.scrollToBottom()即可<!–element-ui–><el-main class=“scrolldivmain”> some code</el-main>methods: { // 滚动到底部 scrollToBottom () { this.$nextTick(() => { setTimeout(() => { var scrollTop = this.$el.querySelector(’.scrolldivmain’) scrollTop.scrollTop = scrollTop.scrollHeight }, 13) }) }}参考文章vue 无法监听scroll事件参考vue-chat代码 ...

前言看下面这段代码：<div class=“parent” style=“height:200px;overflow:auto;background-color:yellow;"> <div class=“children” style=“height: 300px;background-color: blue”> </div></div>父元素的高度小于子元素的高度，子元素的内容根据父元素的视区会有内容裁剪，这时我们设置父元素的overflow属性值为auto，我们可以看到此时显示了滚动条。那么问题来了，究竟是以哪个元素为视窗，滚动条是属于哪个元素呢？通过设置background-color，可以知道，是以parent高度为视窗，滚动条也是属于parent元素的。onscroll看下面这段代码：<script> document.getElementsByClassName(‘parent’)[0].onscroll=function () { console.log(’—–>’.repeat(10)); }</script>onscroll为元素的滚动条滚动时触发的事件，同时通过这段代码也验证了，滚动条是属于parent元素的。scrollTopscrollTop:滚动条当前位置距离滚动条顶部的高度，也就是相对于父元素顶部，子元素被隐藏内容的高度； 只是DOM元素的一个属性（不包括window和document）。看下面这段代码：<script> console.log(document.body.scrollTop); document.getElementsByClassName(‘parent’)[0].onscroll=function (e) { console.log(’—–>’.repeat(10)); console.log(’*****>’.repeat(10),e.target.scrollTop); }</script>首先在控制台会输出一个0. //这是body元素的scrollTop值；然后滚动滚动条的时候，会打印触发每次滚动事件时scrollTop的值。现在我们知道了如何获取scrollTop的值，那么如何改变呢？<script> document.getElementsByClassName(‘parent’)[0].scrollTop=50;</script>我们可以看到当刷新页面时，滚动条直接显示在中间位置，所以我们通过直接给scrollTop赋值就可以改变滚动条的位置。除了scrollTop属性外，DOM元素还有scrollHeight,scrollWidth,scrollLeft等与滚动条相关的属性，这些属性表达的含义不同，但是用法都是相同，值得注意的是，这些属性都是只读的。既然DOM元素可以通过scrollTop属性获取或是设置滚动条的位置，那么document和window如何操作呢？scroll scrollBy scrollTo这三个属性，都是window对象的方法,也是全局的方法。window.scroll(x:XXX,y:XXX):把窗口滚动到指定的位置；window.scrollTo(x,y):与window.scroll相同window.scrollBy(x,y):把窗口相对x,y滚动window.scrollBy(10,-20)//把窗口向右移动10px,向上移动20px。