js scroll相关内容

stackvoid 发布于2019-08-23 14:10 / 1950人阅读

摘要：滚动条当前位置距离滚动条顶部的高度，也就是相对于父元素顶部，子元素被隐藏内容的高度只是元素的一个属性不包括和。除了属性外，元素还有等与滚动条相关的属性，这些属性表达的含义不同，但是用法都是相同，值得注意的是，这些属性都是只读的。

前言

看下面这段代码：

父元素的高度小于子元素的高度，子元素的内容根据父元素的视区会有内容裁剪，这时我们设置父元素的overflow属性值为auto，我们可以看到此时显示了滚动条。

那么问题来了，究竟是以哪个元素为视窗，滚动条是属于哪个元素呢？通过设置background-color，可以知道，是以parent高度为视窗，滚动条也是属于parent元素的。

onscroll

看下面这段代码：

onscroll为元素的滚动条滚动时触发的事件，同时通过这段代码也验证了，滚动条是属于parent元素的。

scrollTop

scrollTop:滚动条当前位置距离滚动条顶部的高度，也就是相对于父元素顶部，子元素被隐藏内容的高度；
          只是DOM元素的一个属性（不包括window和document）。

看下面这段代码：

首先在控制台会输出一个0. //这是body元素的scrollTop值；
然后滚动滚动条的时候，会打印触发每次滚动事件时scrollTop的值。

现在我们知道了如何获取scrollTop的值，那么如何改变呢？

我们可以看到当刷新页面时，滚动条直接显示在中间位置，所以我们通过直接给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。

云服务器 GPU云服务器 js滚动scroll 相关内容云计算服务器的相关内容 js搜索框相关

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100208.html

vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

FingerLiu 2019-08-01 18:01 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

MadPecker 2019-08-29 13:49 评论0 收藏0
JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
微信小程序——商城篇

摘要：微信小程序之跳转在进入商品详情页以后，点击左下角的图标原应该跳转到首页，但是一直点也不跳，而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话，要按业务需求来。前言随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各...

k00baa 2019-08-26 12:01 评论0 收藏0