scrolltop

js:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

由 本小妞迷上赌 提交于 2020-03-15 21:51:35
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding

javascript 获取控件坐标

由 感情迁移 提交于 2020-03-15 21:49:11
function getPos(o) //取元素坐标 { var x = 0, y = 0; do { x += o.offsetLeft; y += o.offsetTop; } while (o = o.offsetParent); return { 'x': x, 'y': y }; } 补充： scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document

微信小程序组件scroll-view

由 末鹿安然 提交于 2020-03-15 10:11:34
视图容器scroll-view : 官方文档 Demo Code var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } }) JS <view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y="true" style=

微信小程序组件scroll-view

由 ◇◆丶佛笑我妖孽 提交于 2020-03-15 10:10:28
视图容器scroll-view : 官方文档 Demo Code var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } }) JS <view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y="true" style=

操作滚动条让页面返回顶部，效果要平滑

由 放肆的年华 提交于 2020-03-12 06:53:54
一键跳回顶部的功能很常见 但是又不想效果平平 不能一瞬间就跳回去 过程要平滑，固定步长会让过程平滑很多 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .long { height: 2000px; background-image: linear-gradient(#e66465, #9198e5); } #btn { border: 1px solid black; border-radius: 50%; position: fixed; right: 0; bottom: 0; height: 100px; width: 100px; display: none; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div class="long"></div> <button id="btn">to top</button> <

防抖和节流

由 半世苍凉 提交于 2020-03-10 20:52:22
防抖的目的：为了减少因函数的频繁调用而加重浏览器负担 防抖：在指定时间内，同一函数只能被触发一次，该时间过后可再次触发 /* @param fn 函数 */ function debounce(fn) { let time = null; return function () { //清除前一个定时器 clearTimeout(time); //创建新的定时器，使用apply修复this指向 time = setTimeout(() => { a.apply(this, arguments) }, 1000) } } function a() { let scrollTop = document.documentElement.scrollTop||document.body.scrollTop; console.log('top-->',scrollTop) } window.onscroll = debounce(a) 来源： https://www.cnblogs.com/aruanmei/p/12458359.html

scroll

由 旧时模样 提交于 2020-03-09 06:23:13
1 scrollWidth 网页正文全文宽 2 scrollHeight 网页正文全文高 3 scrollTop 网页被卷去的高 4 scrollLeft 网页被卷去的左 1 兼容的写法 2 window.onscroll = function (ev) { 3 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 4 console.log(scrollTop); 5 } 使用json格式封装兼容性 1 function scroll() { 2 if(window.pageYOffset !== null){ // 最新的浏览器 3 return { 4 "top": window.pageYOffset, 5 "left": window.pageXOffset 6 } 7 }else if(document.compatMode === 'CSS1Compat'){ // W3C 8 return { 9 "top": document.documentElement.scrollTop, 10 "left": document.documentElement.scrollLeft 11 } 12 } 13 return {

各浏览器获取滚动条高度

由 拈花ヽ惹草 提交于 2020-03-08 12:59:27
Firefox：document.documentElement.scrollTop 或者$(window).scrollTop() chrome：document.body.scrollTop Safari：document.body.scrollTop IE9及以上：document.documentElement.scrollTop 来源： CSDN 作者： qq_42357338 链接： https://blog.csdn.net/qq_42357338/article/details/104728434

[BUG]document.body.scrollTop=0不生效（回到顶部）

由 穿精又带淫゛_ 提交于 2020-03-05 16:39:23
描述 让body回滚到最顶部，设置 document.body.scrollTop = 0; 。 微信内，安卓设备可以，ios设备不可以。   原因 MDN中 scrollTop 是这样定义的 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。 简单来说， scrollTop 是这个元素的内容相对于自己向上滚动的高度。 ios设备中没问题，但是安卓设备 body 比较特殊，即使body没有限制高度，body的内容没有相对于自己滚动，也会有 scrollTop 值。 然而如果限制了body高度，让body的内容相对于自己滚动， ios设备中 body.scrollTop 有值， 安卓设备 body.scrollTop 始终为0。 在线演示（移动端打开）   解决方案 不使用body，在body内部设置最大容器root盒子, 然后操作root盒子。 html, body, #root { height: 100%; } #root { overflow: auto; } <body> <div id="root"> <!-- 这里放内容 --> </div> </body> document.getElementById('root').scrollTop = 0;

基于vue的新组件开发

由 被刻印的时光 ゝ 提交于 2020-03-05 13:37:08
前天完成了一个新组件的开发，做的过程也是各种遇到问题，彻底弄懂了slot，巩固了一些flex布局和jquery的知识，比起自己第一次做组件开发，现在已经是能够下手做，遇到问题解决问题，还算有进步。 但是昨天写博客的时候，就在我快写完的时候，chrome崩溃了。。。我也崩溃了。。。写的东西全没有了！！！我还是继续重新码字吧。。。崩溃。。。 做的这个组件给它起个什么名字比较合理我想了半天也没想出来。。。 需求是这样的： 由两部分组成，上面是导航条，下面每一块显示内容。如下图。 导航条固定在顶部 点击导航里的每一个标签，该标签高亮，该标签相应的div自动跳到内容部分第一栏的位置（这里最后一栏无法跳到第一栏，因为要撑开整个页面） 滑动下面的内容，滑到哪个div对应的navs的标签高亮 核心代码写在下面～供参考哦 html插入nav-list模板： <div id="main"> <nav-list :navs="navs" :contents="contents"> <div v-for="con in contents" :class="'con_' + con.en_name" :slot="'con_' + con.en_name">{{ con.text }}</div> // :class要写在这里，而不要写在<slot>上 </nav-list> </div> 子组件模板：
订阅 scrolltop