前端在线资源
本文地址：
一、开场暖身
网上常见蹲来蹲去的小段子，比方说：“李代沫蹲，李代沫蹲，李代沫蹲完黄海波蹲；黄海波蹲，黄海波蹲，黄海波蹲完宁财神蹲；宁财神蹲，宁财神蹲，宁财神蹲完张耀扬蹲;张耀扬蹲，张耀扬蹲，张耀扬蹲完郭美美蹲;郭美美蹲，郭美美蹲，郭美美蹲完……”。应该源自“萝卜蹲，萝卜蹲，萝卜蹲完苹果蹲……”。
在网页中，滚动条的滚动行为也是类似的调调，如果页面出现多个内嵌滚动条，则行为表现是：子元素滚，子元素滚，子元素滚完父元素滚；父元素滚，父元素滚，父元素滚完容器滚……
比方说下面：
在妹子脸上滚，先是妹子滚，妹子滚完主页面滚，对吧~
//zxx: 别问为什么不使用张含韵，因为张妹子照片是横的，滚动空间小，晓得伐~
这是浏览器的默认行为，如果我们遇到了一个需求：子元素滚，子元素滚完，就完了，父元素不需要滚了。那该如何实现呢？
在PC端，OK，本文介绍的方法，值适用于PC端，移动端，咳咳，我15年就没做过移动端项目，不好意思，手生，我也没去研究。
补充于翌日
移动端的处理，可以参见的这篇文章：“”
二、阻止浏览器默认行为的特定套路
哈，本文标题有些拗口，实际上用一句话概括就是：如何阻止浏览器的默认滚动行为。
基本上，好像印象中就没有例外的，阻止浏览器的默认行为，就一条(假设事件对象参数是event)：event.preventDefault().
这是标准规范使用方法。但是，对于老IE浏览器，event.returnValue = false. 如果你使用jQuery等框架，直接上面的event.preventDefault()就可以，库已经帮你搞定了兼容细节处理。
OK，回到本文。阻止默认滚动，也是类似，关键是找到准确的事件。
第一反应是scroll事件，不知道是不是我测试的方法不对，结果没鸟用；其实想想也可以理解，scroll事件要触发，尼玛必须已经滚动了哈~
后来，发现要从滚动事件的源头处理起来。在PC端，绝大多数滚动都是鼠标滚动触发的（上下快捷键也可以滚动页面，但一般人不知道），因此，我们可以从鼠标滚轮事件入手。
三、鼠标滚轮事件
JS基础知识的啦，mousewheel事件：
dom.onmousewheel = function() {
IE, Chrome都认识，但是FireFox浏览器，要使用DOMMouseScroll, 具体知识呢我之前有写过文章分析过：“”。现在回过头看看这篇文章，内容和点都挺好。但是，当时正好在学习模块化开发，以及JavaScript语言模式，所以，提供的代码，科科，不是拿来主义的调调，所以这篇文章没有火啊~
扯远了，总之呢，我们对鼠标滚动这个事件，进行event.preventDefault()，页面就像齿轮卡壳了一样，滚不动了！
四、原理爬上来
找到了关键钥匙，现在就要开门了。
子元素可以滚，父元素不能滚。
我们可以对子元素写上鼠标滚轮事件，对吧，的那个子元素滚动到边界的时候，我们立马插一刀event.preventDefault()。干掉整个页面的滚动，世界一下子安静了，时间好像突然静止了一般，好像很不错的样子哦！
于是，寡人我屁颠屁颠搞起代码(粗糙示意)：
if (direction == 'up' && scrollTop == 0) {
event.preventDefault()
翻译下就是：哥哥我往上滚，当滚到头的时候，页面滚动歇菜。
Chrome一测试，喔噢，好棒，鼓掌！
FireFox一测试，喔噢，好棒too，鼓掌again!
IE一测试，喔噢，好…………尼玛，滚蛋了~ 滚动高度直接跳过了0，直接把父元素给滚了。
靠，什么鬼？不兼容，搞不定，怎么办？
五、临界手动翻滚
就是说，我们不要到0或者最大滚动高度时候，再去阻止默认滚动，我们要在到达边界的前一个滚动，就开始下手，手动滚动到边界，同时event.preventDefault()阻止鼠标滚动行为。于是，IE浏览器也棒棒哒了！
说实话，从开头到现在，中文啪啪啪敲了这么多，其实毛线用都没有，从度娘或谷哥过来的同学需要的不是什么神神叨叨的废话，需要的只是下面这段可以直接拿来主义的代码，好吧，拿去吧——子元素滚完就滚完的方法源代码：
$.fn.scrollUnique = function() {
return $(this).each(function() {
var eventType = 'mousewheel';
// 火狐是DOMMouseScroll事件
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
$(this).on(eventType, function(event) {
// 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientH
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop &= delta) || (delta & 0 && scrollHeight - height - scrollTop &= -1 * delta)) {
// IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
this.scrollTop = delta > 0? 0: scrollH
// 向上滚 || 向下滚
event.preventDefault();
没错，依赖jQuery的一个扩展方法，上面代码只要拷贝到你页面的JS中，然后，你希望哪个元素滚动到底，父级不滚动，直接：
$().scrollUnique();
就可以了，然后就可以打卡下班了。
对了，有个demo, 您可以狠狠地点击这里：
如果您的显示器竖屏，或者宽度1920的，会发现右侧没有大滚动条，则，麻烦大家手动高度改小，拉拉窗口啊，或者打开控制台之类的。
//zxx: 你问我什么不加高页面造一个滚动条？唉，舍不得把底部的广告刻意藏在滚动条之外~
六、抛砖引玉
前文也提到，页面滚动条滚动的事件源很多，不仅仅是鼠标滚动，上下键，End键， Home键等都有滚动定位行为。因此，大家要想100%全方位封杀滚动行为，仅仅上面的鼠标滚动代码是不够的，但是，关键钥匙已经给大家了，大家可以依次，按照自己的项目需求进行进一步深入拓展。
不过，我个人觉得，上面mousewheel处理已经足够了，什么键盘触发滚动，让他自己去玩耍吧，还是别折腾了，吃力不讨好。
哟，写完了，抬头一看，一张截图都没有，这可不行，风水不能断，搞一张。
恩，不错，真正的无可挑剔的「截」图。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：
（本篇完）
相关文章 (0.476) (0.476) (0.048) (0.048) (0.048) (0.048) (0.048) (0.048) (0.048) (0.048)
标签： , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
热门总排行[Html-Css] 兼容性背景颜色半透明CSS代码（不影响内部子元素） | IT知识库
-& 正文阅读
[Html-Css]兼容性背景颜色半透明CSS代码（不影响内部子元素）
兼容性背景颜色半透明CSS代码（不影响内部子元素）
如何简单兼容性的实现父元素是半透明背景色，而子元素不受影响。兼容所有浏览器的背景颜色半透明CSS代码：
background-color: rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#);注意：startColorStr 和 endColorStr 的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。2位透明度的换算方法：x=alpha*255&，将计算的结果 x 转换成十六进制即可。js换算16进制方法： x.toString(16)例如：上面的 0.25 透明度，换算为IE的AA透明度： var a = 0.25 * 255 = 63.75 ~= 64; &a.toString(16) = 40Demo示例：
&style type="text/css"&
.menu-nav-bg {
background-color: rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#);
/* css hack: rgba background with IE filter alternative: IE9 renders both! */
.menu-nav-bg:not([dummy]) {
filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false');
/* 对于IE9，除了使用 :not([dummy]) hack 外，还可以使用 :root，推荐使用这个
* :root 选择器已经被现代主流浏览器支持了，除了IE8及以下IE浏览器
:root .menu-nav-bg {
filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false');
&div class="menu-nav-bg"&
&a href="#"&我的首页&/a&
&a href="#"&我的微博&/a&
&/div&思想：现代浏览器使用 CSS3 RGBA 实现半透明背景色，IE使用&渐变滤镜&filter: progid:DXImageTransform.Microsoft.Gradient&实现半透明。注意：不能使用&opacity:0.5&属性或是 IE filter:alpha(opacity=50) 半透明滤镜，因为这种半透明属性会让子元素也跟着半透明。
加: 14:28:58&
更: 14:29:34&
&&网站联系: qq: email:&前端（13）
外层div，不要使用opacity实现透明.，使用background:rgba(120,120,120,0.7);实现效果
对于不同的浏览器需要区别对待
*IE系列浏览器外层DIV，设置透明，内容元素设置元素定位为相对定位或者绝对定位
&div style=”filter:alpha(opacity=70);”&
&div style=”position:relative;”&text&/div&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：981次
排名：千里之外
原创：21篇
(20)(3)(1)}