scrolltop | 易学教程

获取滚动条滑动的距离

阅读更多关于获取滚动条滑动的距离

/** * @description 获取滚动条滑动的距离 * document.documentElement.scrollTop | document.body.scrollTop * document.documentElement.scrollLeft | document.body.scrollLeft * IE8 和 IE8 以下的浏览器不兼容 * window.pageYOffset * window.pageXOffset * @returns {x:0,y:0} */function getScrollOffset(){ if(window.pageXOffset){ return { x: window.pageXOffset, y:window.pageYOffset } }else{ return { x: document.body.scrollLeft + document.documentElement.scrollLeft, y: document.body.scrollTop + document.documentElement.scrollTop, } }}

ios下拉背景图片放大

阅读更多关于 ios下拉背景图片放大

微信小程序全局关了下拉刷新，但是IOS还是可以下拉，于是产品就有新需求了，类似朋友圈那样的页面，下拉的时候背景图片要跟着放大显示铺满整个下拉背景，文笔不好，直接上关键代码↓ < view class = " header " > < image src = " {{bgImg}} " style =" transform: scale( { { scale } } ) translateY( { { translateY+ 'rpx' } } ) ; " mode = " aspectFill " class = " myBg " lazy-load = " true " > </ image > </ view > .header { z-index : -1 ; position : fixed ; top : 0 ; right : 0 ; left : 0 ; .myBg { width : 100% ; transform-origin : 50% 0 ; background-color : #f3f3f3 ; } } onPageScroll ( e ) { var h = this . data . height ; var a ; var b ; wx . getSystemInfo ( { success ( res ) { a = 750 / res .

微信小程序，滑动页面到指定位置，固定元素在顶部

阅读更多关于微信小程序，滑动页面到指定位置，固定元素在顶部

平常开发中可能会用到，当页面滑动到某一个位置时，需要固定导航栏或者某个元素在顶部位置，向上滑动又会回归原位，方法特别好实现，在小程序自带的方法 onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop,代码如下 onPageScroll: function (t) { var a = this; // console.log(t.scrollTop) a.setData({ scrollTop:t.scrollTop }) }得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，我写的是一个可以左右滑动的导航栏，因此为要在scroll-view中定义 class="{{scrollTop>758 ? 'rel' : 'nav'}}"，758就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的rel样式 position: fixed; top:52px; 自己记录开发中的小问题，欢迎大家指正

前端开发入门到实战：计算一个页面内每个模块的曝光时间（停留时间）

阅读更多关于前端开发入门到实战：计算一个页面内每个模块的曝光时间（停留时间）

产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3...中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。方案一：根据页面dom将页面分模块 var bodyChildrenLists = $('body').children() var bodyChildDomLsit = [] var initHeight = 0 for (var i = 0; i < bodyChildrenLists.length; i++) { if (bodyChildrenLists[i].tagName !== 'SCRIPT') { bodyChildDomLsit.push({ className: bodyChildrenLists[i].className, height: bodyChildrenLists[i].offsetHeight }) } } 存在的问题：不同人的代码风格差异性大，该方案不适合这类代码风格 <body> <div class="container"> <div class="header"></div> <div class="nav"></div> <div class=

scrollTop的兼容性小结

阅读更多关于 scrollTop的兼容性小结

在页面上加上了 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> 之后，document.body.scrollTop的值一直为0（在IE和FF下），网上有人改为document.documentElement.scrollTop就可以了，试用了一下真的OK了。但是当换到Google浏览器时，问题又出来了，document.documentElement.scrollTop值一直为0！到是document.body.scroll的值正确了。网上有解决方案如下：（ http://www.codebit.cn/pub/html/javascript/tip/get_scroll_position/ ） [javascript] view plain copy <mce:script type= "text/javascript" ><!-- // 说明：用 Javascript 获取滚动条位置等信息 // 来源：ThickBox 2.1 // 整理：CodeBit.cn ( http://www.CodeBit.cn ) function getScroll() { var t, l, w, h; if

jQuery无缝向上滚动效果

阅读更多关于 jQuery无缝向上滚动效果

该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果，废话不多说，直接上代码（1）向上滚动 HTML： <div id="demo" style="height:110px;overflow:hidden;"> <div id="demo1"> <ul class="prizelist"> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span><

vue进入页面时不在顶部，检测滚动返回顶部按钮

阅读更多关于 vue进入页面时不在顶部，检测滚动返回顶部按钮

1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(dis > 120){ this.flag = true }else{ this.flag = false } }, 一般给window绑定监测事件就能获得window.pageYOffset滚动距离。 2.有些时候给body设置了{width:100%,height:100%}，之后就需要将事件绑定在document.body，才能获得document.body.scrollTop滚动距离。 vue进入页面时不在顶部 router.afterEach((to, from) => { window.scrollTo(0,0); })； history.pushState scrollBehavior (to, from,

安卓和ios键盘挡住输入内容

阅读更多关于安卓和ios键盘挡住输入内容

html瀑布流

阅读更多关于 html瀑布流

>>>model class Img(models.Model): src = models.FileField(verbose_name='路径',upload_to='static/img') class Meta: verbose_name_plural = '图片' >>>views import json def imgback(request): nid = request.GET.get('nid') #获取的是QuerySet数据类型 img_list = Img.objects.values('id','src') # 将QuerySet数据类型转换成列表 img_list = list(img_list) ret = { 'status': True, 'data': img_list, } return HttpResponse(json.dumps(ret)) >>>html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; }

vue滚动分页加载以及监听事件处理

阅读更多关于 vue滚动分页加载以及监听事件处理

1 <template> 2 <div class="bodyContainer"> 3 <div class="allContent" id="pageTop"> 4  5 <div class="brokerBlock" v-show="isBroker && !loading"> 6 <broker :list="brokerInfo" v-show="Object.keys(brokerInfo).length>0" @change="protocolClick" @remove="reomoveBrokerClick"></broker> 7 </div> 8  9 <div class="con artistCon" v-show="artistTotal > 0"> 10 <div class="title " :class="{isFixed:!isBroker}" id="artistTitle"> 11 我的艺人<span class="gray">({{artistTotal}}位)</span> 12 </div> 13 <ul class="artistList"> 14 <li class="box artistItem" v-for="item of artistInfoList" :key="item

订阅 scrolltop