V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GPU
V2EX  ›  程序员

Chipehll 论坛的导航栏滚动的时候会跟着走,应该怎么样去禁止他?

  •  
  •   GPU · 2014-07-15 20:20:21 +08:00 · 3400 次点击
    这是一个创建于 3578 天前的主题,其中的信息可能已经有所发展或是发生改变。



    如上图

    感觉应该是这个代码 。求教怎么用Chrome的开发者工具让他先暂停一下呢?

    https://gist.github.com/774bc05aa725a78d4c95

    这个段js 在论坛的 forum.js 的文件里面

    吐槽 : 究竟怎么样才是正确的发代码.每次都发不成功
    21 条回复    2014-07-16 10:04:51 +08:00
    icevil
        1
    icevil  
       2014-07-15 20:49:45 +08:00
    Console 输入:

    this.nv.style.position='static';this.openflag=false;

    回车。
    GPU
        2
    GPU  
    OP
       2014-07-15 21:24:36 +08:00
    @icevil 试了不行。
    guchengf
        3
    guchengf  
       2014-07-15 21:35:57 +08:00
    先暂停一下的话不能直接删除了吗?
    document.getElementById('nv').style.position='static' 可以有效
    但是代码检测,只要页面发生滚动,就会直接重置导航栏的状态所以没用的
    直接在检查元素里把导航栏删了,要的时候在ctrl+z就可以了
    guchengf
        4
    guchengf  
       2014-07-15 21:39:16 +08:00
    勘误,我尝试了之后,发现1L的代码是可行的
    GPU
        5
    GPU  
    OP
       2014-07-15 21:49:39 +08:00
    @guchengf 求带怎么操作。 我在Console 输入了也是会动呢?
    Tonni
        6
    Tonni  
       2014-07-15 21:50:31 +08:00   ❤️ 1
    在Console里面执行:
    `document.querySelector("#nv").style.position = "static"`
    立马见效,但是因为有事件绑定的缘故,每次滚动窗口又会出现固定浮动效果,我判断是因为window或者document上绑定了onscroll事件,每次滚动条变化都会导致从新计算,但是我从Console里执行下面的几个命令都返回的null:

    ```
    window.onscroll
    null
    document.onscroll
    null
    document.querySelector("html").onscroll
    null
    document.querySelector("body").onscroll
    null
    ```


    怎么才能找到具体事件绑定呢?有知道的朋友告知下。
    GPU
        7
    GPU  
    OP
       2014-07-15 21:53:00 +08:00
    @guchengf 无奈啊。 我用隐身模式可以锁定 。普通模式就不行了 。估计有插件又冲突了啊
    guchengf
        8
    guchengf  
       2014-07-15 21:53:04 +08:00
    @GPU 就那样输入就可以了,没有特别的技巧
    GPU
        9
    GPU  
    OP
       2014-07-15 22:04:22 +08:00
    @Tonni @icevil 测试了一番 。1L这个在非帖子内容页面上面有效 , 但是进入到帖子里面去之后,输入命令后当时是可以的 ,但是只要再滚动一下页面就失效了

    然后6楼这个 在任何页面都是 输入的时候可以出现效果 。如果一滚动页面就失效
    Tonni
        10
    Tonni  
       2014-07-15 22:06:27 +08:00   ❤️ 1
    @GPU 我觉得是某个元素的onscroll事件作怪,我不知道具体是哪个DOM上绑定的这个事件,有知道的朋友说下查找方法。
    Tonni
        11
    Tonni  
       2014-07-15 22:28:10 +08:00   ❤️ 1
    我找到了,就是绑定在window上的scroll事件做鬼。
    解决办法就是在Console里面执行这两个命令:
    ```
    document.querySelector("#nv").style.position = "static";
    window.removeEventListener("scroll", getEventListeners(window).scroll[0].listener);
    ```

    执行完滚两步,看下效果。
    Tonni
        12
    Tonni  
       2014-07-15 22:35:30 +08:00   ❤️ 1
    其实window.scroll下面绑定了两个事件,在列表页时控制浮动的事件回调在window.scroll事件队列的第一个位置,所以上面的代码生效,但是在帖子的内容页控制浮动的事件回调在window.scroll事件队列的第二个位置,所以上面的代码要在帖子内容页生效需要执行两次,或者干脆执行下面的命令,将这两个事件在所有页面都删除掉:
    ```
    document.querySelector("#nv").style.position = "static";
    window.removeEventListener("scroll", getEventListeners(window).scroll[0].listener);
    window.removeEventListener("scroll", getEventListeners(window).scroll[0].listener);
    ```

    符上一个有用的链接: http://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener
    Tonni
        13
    Tonni  
       2014-07-15 22:44:16 +08:00   ❤️ 1
    刚才我又试了下,window下绑定的resize事件也会导致这个问题,继续上面的代码,还要加一段代码移除resize事件的回调,完整的代码就应该是:
    ```
    document.querySelector("#nv").style.position = "static";
    window.removeEventListener("scroll", getEventListeners(window).scroll[0].listener);
    window.removeEventListener("scroll", getEventListeners(window).scroll[0].listener);
    window.removeEventListener("resize", getEventListeners(window).resize[0].listener);
    ```
    GPU
        14
    GPU  
    OP
       2014-07-15 23:11:12 +08:00
    @Tonni 1万个感谢 。在v2 第一次遇到你这么热心的人啦
    GPU
        15
    GPU  
    OP
       2014-07-15 23:13:11 +08:00
    @Tonni 还有想知道你是怎么一步一步找到的相关的? 我一直不知道开发者工具的这些功能应该怎么去用 。 只会用Elements 修改一下
    Tonni
        16
    Tonni  
       2014-07-15 23:56:17 +08:00
    @GPU ;),我就是吃这口饭的,苦逼前端工程师,解决问题的办法就是分析问题,评估问题出现在什么地方,然后去验证问题,找到问题了,然后再Google一下就解决啦,当然这些是要靠一定的经验基础的。
    KillAd
        17
    KillAd  
       2014-07-16 00:37:07 +08:00
    CHH账号被莫名其妙封掉了 联系他们站长 理都不理!
    GPU
        18
    GPU  
    OP
       2014-07-16 01:16:21 +08:00
    @Tonni 我还想知道在Console 里面用什么命令可以选择class的id ,我想把头像也隐藏掉了。要求有点多都不好意思了


    @KillAd 你是什么原因被ban 了。是否永久禁言 ? 如果不是的话 可能是因为最近论坛的BUG 禁言到期后不会自动恢复要手动才行。
    GPU
        19
    GPU  
    OP
       2014-07-16 01:27:00 +08:00
    @Tonni
    我试了这条命令
    ````
    document.querySelector(".pls .avatar").style.display = "none";

    ````

    但是只有第一个出现的元素隐藏的.下面的就没反应了.
    Tonni
        20
    Tonni  
       2014-07-16 08:53:14 +08:00 via Android
    @GPU 不是querySelector是querySelectorAll这个方法,匹配所有的元素,现在在地铁,不方便调试
    Tonni
        21
    Tonni  
       2014-07-16 10:04:51 +08:00
    ```
    var avatarList = document.querySelectorAll(".pls .avatar");
    var nodes = Array.prototype.slice.call(avatarList, 0);
    nodes.forEach(function (node){node.style.display = "none"});
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2222 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 09:57 · PVG 17:57 · LAX 02:57 · JFK 05:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.