禁止页面Body在后台滚动我最讨厌的一种情况, 是在弹出框滚动的时候, 后面的 <body> 也跟着一起滚了。

译者：铁胖子

我最讨厌的一种情况, 是在弹出框滚动的时候, 后面的 <body> 也跟着一起滚了。你可能也碰到过这种情况: 想滚动一下对话框, 却看到后面的页面也跟着一起滚动了。这真是种糟糕的用户体验, 真杯具、呵呵。

那么有没有什么比较好的处理方式? 监听 scroll 事件并且执行 preventDefault 和 stopPropagation, 然而并没有什么暖用。而最简单的方式是使用CSS:

body.noScroll,html.noScroll { /* ...或者其他类名,如: body.dialogShowing */
	overflow: hidden;
	height:100%; /* 感谢 ""陈奇"" 评论提供的修正 */
}

让整个 <body> 禁止溢出, 可以保证只有获取焦点的元素会滚动, 不会连带其他元素。这是一种简单却实用的方法, 当然,你需要JS代码来配合, 动态的增加/移除 body 元素上相应的 class 。