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

2014-07-15 20:20:21 +08:00
 GPU



如上图

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

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

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

吐槽 : 究竟怎么样才是正确的发代码.每次都发不成功
3508 次点击
所在节点    程序员
21 条回复
icevil
2014-07-15 20:49:45 +08:00
Console 输入:

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

回车。
GPU
2014-07-15 21:24:36 +08:00
@icevil 试了不行。
guchengf
2014-07-15 21:35:57 +08:00
先暂停一下的话不能直接删除了吗?
document.getElementById('nv').style.position='static' 可以有效
但是代码检测,只要页面发生滚动,就会直接重置导航栏的状态所以没用的
直接在检查元素里把导航栏删了,要的时候在ctrl+z就可以了
guchengf
2014-07-15 21:39:16 +08:00
勘误,我尝试了之后,发现1L的代码是可行的
GPU
2014-07-15 21:49:39 +08:00
@guchengf 求带怎么操作。 我在Console 输入了也是会动呢?
Tonni
2014-07-15 21:50:31 +08:00
在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
2014-07-15 21:53:00 +08:00
@guchengf 无奈啊。 我用隐身模式可以锁定 。普通模式就不行了 。估计有插件又冲突了啊
guchengf
2014-07-15 21:53:04 +08:00
@GPU 就那样输入就可以了,没有特别的技巧
GPU
2014-07-15 22:04:22 +08:00
@Tonni @icevil 测试了一番 。1L这个在非帖子内容页面上面有效 , 但是进入到帖子里面去之后,输入命令后当时是可以的 ,但是只要再滚动一下页面就失效了

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

执行完滚两步,看下效果。
Tonni
2014-07-15 22:35:30 +08:00
其实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
2014-07-15 22:44:16 +08:00
刚才我又试了下,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
2014-07-15 23:11:12 +08:00
@Tonni 1万个感谢 。在v2 第一次遇到你这么热心的人啦
GPU
2014-07-15 23:13:11 +08:00
@Tonni 还有想知道你是怎么一步一步找到的相关的? 我一直不知道开发者工具的这些功能应该怎么去用 。 只会用Elements 修改一下
Tonni
2014-07-15 23:56:17 +08:00
@GPU ;),我就是吃这口饭的,苦逼前端工程师,解决问题的办法就是分析问题,评估问题出现在什么地方,然后去验证问题,找到问题了,然后再Google一下就解决啦,当然这些是要靠一定的经验基础的。
KillAd
2014-07-16 00:37:07 +08:00
CHH账号被莫名其妙封掉了 联系他们站长 理都不理!
GPU
2014-07-16 01:16:21 +08:00
@Tonni 我还想知道在Console 里面用什么命令可以选择class的id ,我想把头像也隐藏掉了。要求有点多都不好意思了


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

````

但是只有第一个出现的元素隐藏的.下面的就没反应了.
Tonni
2014-07-16 08:53:14 +08:00
@GPU 不是querySelector是querySelectorAll这个方法,匹配所有的元素,现在在地铁,不方便调试

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/122794

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX