在微信端开发中遇到一个这种问题:明明用的公共文件(代码如下图),其他页面每次都能触发这个滚动条$(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()兼容各大浏览器呢?

我读书少,是被谁骗了么!!!!!

随机推荐

  1. ES6笔记(二)

    一.字符串的扩展1. 用于从码点返回到对应字符. String.fromCodePoint(xx)2. for...of可以遍历字符串3. includes():返回布尔值,表示是否找到了参数字符串. ...

  2. Hibernate的增删改查(事务)

    Hibernate的事务: 1. 设置事务隔离级别都是用  自己进行存储的 二进制      十进制 read uncommitted   读未提交        0001         1 rea ...

  3. mybatis使用接口联合查询

    一.先建立两个实体类和配置文件 配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE c ...

  4. git 的安装与初始化

    1搭建本地git服务器: 1.1安装git 对于ubuntu系统,一般自带git,可以使用git --version 查看版本号 ,或使用apt-get install git  . centos上对 ...

  5. c++常量指针和指针常量的区别

    int a:int * const p = &a: //指针常量,*p可以修改*p = 8:(OK) p不可以修改 p++(ERROR) int a,b:const int *p = & ...

  6. idea安装proto插件后不能识别.proto文件解决方案

     just had a try and it worked well. Could you please check "File Types" in IDEA? Open &quo ...

  7. python os.walk()遍历文件夹

    转自 http://alanland.iteye.com/blog/612459 via @alanland 今天第一次进行 文件遍历,自己递归写的时候还调试了好久,(主要因为分隔符号的问题),后来发 ...

  8. java的基础数据类型

    Java 里面的数据类型从大的方面分为两类,一是基本数据类型,一是引用类型.基本的JAVA 数据类型层次图如下: Java 中的基本数据类型可分为四种:(1)逻辑型:boolean(2)文本型:cha ...

  9. IDEA2017 免费激活方法

    选择license server,然后填下面地址,选择一个就好. http://intellij.mandroid.cn/ http://idea.imsxm.com/ http://idea.ite ...

  10. python的列表生成式

    列表生成式 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1, 2, 3, 4, 5, 6, 7, ...