$(window).scroll()无法触发问题
在微信端开发中遇到一个这种问题:明明用的公共文件(代码如下图),其他页面每次都能触发这个滚动条$(window).scroll事件,以显示右下角“回到顶部”这个按钮图标
但是,问题来了,最该需要使用“回到顶部”功能的列表页面时候,居然不显示这个图标了!!!(当时我就想一句mmp不知道送给谁)。

我查看了html加载情况,嘿,加载是加载了,按要求加载的哦,一点都不缺斤少两(如下图),明晃晃的display:none送给你~
静态页的也是这个样子哦,滑动了滚动条才显示可爱的向上图标哦~

加载完数据死活不触发滚动事件(微笑^V^)
忘记说了,我用的是$.each去循环列表,列表没问题,不显示一个小小的图标而已(努力微笑~^V^~)
本来嘛,小功能,不影响大局,回头直接直愣愣显示($(“#toTop”).show())不隐藏就行了。
但是吧……我觉得还是需要再抢救一下,你看吧,其他页面都是滚动条离开顶部时候才显示图标的,就列表页面不懂事,如此不一致的画风,列表页也是会自卑的好吗?(不生气^U^)
上网查,各种各样的可能性(写错代码,初始化高度不够循环,body包不住等等),一一试着改了:初始化高度不够这个比较有意思,所以我就找这个方向改的。
以下是反面案例
同事建议我添加body的高度和HTML的高度样式(height:100%)嘿!成了,图标显示了呢!
并不是……
人家图标收不回去了呢,就是不触发滚动事件,就是这么傲娇(有点生气,但是还是要保持微笑^o^)。
又一想,等列表加载完再去触发这个方法是不是可行?于是我把$(window).scroll()事件复制到加载列表的函数里面,循环完列表了就马上加载滚动条方法!
蓝鹅……
不显示,就是不显示!(微笑……笑不出来)
放在$(function(){ 滚动事件 })……不行哦
成功案例
我想着,反正都不行了,就试一下document .scroll() (注意,这种写法是会报错的),居然显示了,并且和我想要的效果一毛一样!!!
报错的居然还能行!!!
情何以堪?
顺着这条线,我把公共文件里的代码改了:把$(window).scroll()改成document.scroll()
全面报错,手动再见。
我也知道这样写不对啊,于是改公共方法:改成$(document).scroll()
不报错,所有页面都不显示向上按钮了。再见,以死谢罪……
这样吧,公共方法咱不改,用着$(window).scroll(),在列表加载完成后再放一个$(document).scroll(),反正列表页不触发$(window).scroll(),应该问题不大。
居然成功了……
论:$(window).scroll()与$(document).scroll()的区别
说好的区别不大并且$(window).scroll()兼容各大浏览器呢?
我读书少,是被谁骗了么!!!!!
随机推荐
- 初学web前端
菜鸟刚入门,说说最近学习的心得吧. 首先我学前端主要是因为前端可以看到一些东西,比较有趣 好玩.相比其他语言更简单一些 ,但是却没有那么枯燥. 刚刚开始学习前端肯定就是html+css了.我是混着学的 ...
- 框架、颜色、颜色名、脚本、字符实体、URL、速查列表
一. 1.<iframe></iframe>标签设置内联框架(一个内联框架用来当前HTML文档嵌入另一个文档).[语法:<iframe src="URL&quo ...
- 记录前台js判断,如果为空,給议空的占位
这个主要是根据所有的值,按顺序输出,如果没有值,就给予空的占位, //页面加载的时候获取左边和右边的所有游客id var array_left_start = new Array(); ...
- MySQL 必知必会学习笔记(常用命令二)
CREATE TABLE students(student_id INT UNSIGNED, name VARCHAR(30), sex CHAR(1), birth DATE, PRIMARY KE ...
- 模块化 Sea.js(CMD)规范 RequireJS(AMD)规范 的用法
插入第三方库AMD CMD都 一样 如:JQ(再JQ源码里修改) 使用seajs的步骤 1.HTML里引入seajs <script src="./lib/sea.js"& ...
- 在当前TestSuite/TestCase run之前先run另一个TestSuite/TestCase
在当前的TestSuite/TestCase的Setup Script里面写上这段代码: import com.eviware.soapui.model.support.PropertiesMap l ...
- node作为中间层 —> 跨域请求java后台接口(使用http-proxy-middleware中间件)
情景:利用node的express 作为中间层,跨域调取java后台接口,由于java接口对session有判断,因此每次请求都必须在req的headers中需要带上cookie,否则接口报500错误 ...
- Vue源码之 Vue的生命周期
天地初开就是new Vue(options),里面就一句话 this._init(options); (Vue.prototype.init 的赋值在initMixin(Vue)方法里) _init方 ...
- day04 list tuple
一. 上节课内容回顾 字符串 由', ", ''', """括起来的内容是字符串 字符:单一文字符号. 字符串: 把字符连成串(有顺序的) 索引和切片 s[st ...
- 浏览器兼容性汇总--CSS篇
目录 CSS篇 1. cursor:hand VS cursor:pointer 2. innerText在IE中能正常工作,但在FireFox中却不行 3. ...