$(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()兼容各大浏览器呢?
我读书少,是被谁骗了么!!!!!
随机推荐
- 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...
- vue2数组更新视图未更新的情况
以选中列表为例 <p @click="selectGoods(item, index)" :class="{'selected': item.isActive}&q ...
- linux网络编程基础--(转自网络)
转自 http://www.cnblogs.com/MyLove-Summer/p/5215287.html Linux下的网络编程指的是socket套接字编程,入门比较简单. 1. socket套接 ...
- kd-tree题目总结
在竞赛中,kd-tree一般只用于平面,很少有高于二维的情况. 在随机情况下,kd-tree的复杂度为O(NlogN),但会被极端数据卡到平方级别. 总而言之,就是优美的暴力. 查询时,通过估价函数进 ...
- PHP用post来进行Soap请求
最近调了一个Soap请求C# webservice的项目.网上坑不少. 使用原生的SoapClient库请求也是失败.只好用post来进行模拟了.代码贴出来,给大家参考一下. <?php nam ...
- java 随机生成6位短信验证码
生成6位随机数字其实很简单,只需一行代码,具体如下: String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000) ...
- java的http请求实例
package vqmp.data.pull.vqmpull.common.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory ...
- Linux 安装Python37
1.下载python3.7.0 https://www.python.org/downloads/release/python-370/ 2.创建Linux的python37目录 mkdir /usr ...
- web开发中 代码解决部分IE兼容问题
首先是自己遇到问题: 一套系统,以前的开发asp旧+c#新后台管理扩展.完善后,在2013年前基本无问题,很是畅顺. 其中.到升级了浏览器后.例如ie9以后,则问题出现了. 如图: 这是一个js的 ...
- 第十四周翻译-《Pro SQL Server Internals, 2nd edition》
<Pro SQL Server Internals, 2nd edition> 作者:Dmitri Korotkevitch 翻译:赖慧芳 译文: 设计和优化索引 定义一种应用于所有地方的 ...