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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3819 天前的主题，其中的信息可能已经有所发展或是发生改变。

如上图

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

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

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

吐槽 : 究竟怎么样才是正确的发代码.每次都发不成功

forum.js

chipehll

代码

21 条回复 • 2014-07-16 10:04:51 +08:00

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 via Android

@GPU 不是querySelector是querySelectorAll这个方法，匹配所有的元素，现在在地铁，不方便调试

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"});
```