哪个网站做ppt能赚钱,自动外链网址,电商平台方案,网站备案在外地一、滚动条样式
1. ie8浏览器
名称描述scrollbar-arrow-color三角箭头的颜色scrollbar-face-color立体滚动条的颜色#xff08;包括箭头部分的背景色#xff09;scrollbar-3dlight-color立体滚动条亮边的颜色scrollbar-highlight-color滚动条的高亮颜色#xff08;左阴影包括箭头部分的背景色scrollbar-3dlight-color立体滚动条亮边的颜色scrollbar-highlight-color滚动条的高亮颜色左阴影scrollbar-shadow-color立体滚动条阴影的颜色scrollbar-darkshadow-color立体滚动条外阴影的颜色scrollbar-track-color立体滚动条背景颜色scrollbar-base-color滚动条的基色出现滚动条的元素{/*三角箭头的颜色*/scrollbar-arrow-color: #fff;/*滚动条滑块按钮的颜色*/scrollbar-face-color: #0099dd;/*滚动条整体颜色*/scrollbar-highlight-color: #0099dd;/*滚动条阴影*/scrollbar-shadow-color: #0099dd;/*滚动条轨道颜色*/scrollbar-track-color: #0066ff;/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/scrollbar-3dlight-color:#0099dd;/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/scrollbar-darkshadow-color: #0099dd;/*滚动条基准颜色*/scrollbar-base-color: #0099dd;}2. 其他浏览器参考-风铭大师
名称描述::-webkit-scrollbar滚动条整体部分其中的属性: width,height,background,border等。::-webkit-scrollbar-button滚动条两端的按钮。可以用display:none让其不显示也可以添加背景图片颜色改变显示效果。::-webkit-scrollbar-track外层轨道。可以用display:none让其不显示也可以添加背景图片颜色改变显示效果。::-webkit-scrollbar-track-piece内层轨道具体区别看下面gif图需要注意的就是它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb滚动条里面可以拖动的那部分。::-webkit-scrollbar-corner边角两个滚动条交汇处。::-webkit-resizer两个滚动条交汇处用于拖动调整元素大小的小控件基本用不上
::-webkit-scrollbar {width: 6px; /*纵向滚动条的宽度*/height: 6px; /*横向滚动条的高度*/background-color: #181c32;
}::-webkit-scrollbar-thumb {background-color: #5a76cd;
}二、滚动条造成页面抖动
1. 造成页面抖动的原因
当布局用到margin:0 auto;左右水平居中时且有的页面有滚动条有的页面没有这样会造成抖动。
div{width:1200px;margin:0 auto;
}
bodydiv/div
/body2. 解决办法参考1-zh_rey、 参考2-OZCNO、推荐参考3-张鑫旭
1一直存在滚动槽overflow-y:scroll;
2让页面右边偏移滚动条的宽度那么长 margin-left: calc(100vw - 100%); 或 padding-left: calc(100vw - 100%);
1、加在居中定宽主体的父级身上。2、calc 是CSS3中的计算IE10浏览器支持IE9浏览器基本支持(不能用在background-position上)-3、100vw 相对于浏览器的 window.innerWidth是浏览器的内部宽度注意滚动条宽度也计算在内而100%是可用宽度是不含滚动条的宽度。 于是calc(100vw - 100%) 就是浏览器滚动条的宽度大小如果有如果没有滚动条则是0左右都有一个滚动条宽度或都是0被占用主体内容就可以永远居中浏览器啦从而没有任何跳动 注意ie 浏览器有个 offset 偏移量比较推荐使用 padding-left能解决部分问题。 设置 padding-left 有时候拉动横向滚条条时页面的偏移量这个时候是padding还是不正确这时需要做响应式。
media screen and (min-width: 1240px) {定宽主体 {padding-left: calc(100vw - 100%);}
}此时原来定宽主体就不用再写 padding-left: calc(100vw - 100%);只需要写上面这段响应式就可以了。
3兼容写法
html {overflow-x: hidden;overflow-y: auto;
}
body {width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%);
}也可以看我之前写的不过相差不是很大滚动条造成页面抖动问题 三、滚动条部分留白问题
造成滚动条留白的原因是宽度设置了100%哪里留白就把那的 width:100% 改为min-width:100%就好了。 四、让背景图不跟随滚动条滚动
解决办法参考-站住别跑
1css 在设置背景图的元素中设置一条属性 background-attachment:fixed;兼容IE6 2js
script typetext/javascriptvar scrollBackground true;
/script 具体效果就看原文吧
