解决scrollspy无法跟踪中文标签id的问题。

现在这个bug已经被修复,见#10205。如果你正在使用最新的bootstrap版本,应该不会再遇到这个问题。

Twitter-Bootstrap有一个名为scrollspy的脚本,顾名思义就是可以帧测页面的滚动,然后自动更新导航条的状态。见下面这个实例(请自动忽略最上面JS Bin的工具条):

JS Bin

当页面滚动时,导航条里相应的元素 @fat 和 @Dropdown 会被激活,根据这个视觉效果可以很直观的了解你现在阅读的进度。

仔细观察我标为红色的 @mdo 元素,为什么它始终没有被激活呢?如果观察它的HTML文件(点击JSBIN面板的HTML按钮),你会发现我把 @mdo 的标签 id 设成了中文艾姆迪欧。而 scrollspy 居然不支持中文标签 id!

为什么 scrollspy 不能支持中文的 id 呢?仔细阅读 scrollspy 的源代码,你可以在第61行 处发现端倪—— scrollspy 在查找正文中与标签id匹配的标题时,使用了一个正则表达式:

1
var $href = /^#\w/.test(href) && $(href)

其中,\w 是一个javascript的元字符,可以匹配英文字符,却无法匹配中文字符。

知道了这点就可以通过修改这个正则表达式让其支持中文字符。将该行改写为:

1
var $href = /^#./.test(href) && $(href)

保存后刷新一下页面,看看这时候是不是就可以滚动跟踪这些页面了呢?我的wiki左侧的导航菜单就采用了修改后的scrollspy来进行滚动侦测,例如这个页面

Comments