国外网站兼职做效果图,注册公司一年需要多少费用,交互式网站模板,wordpress 存档页面总结#xff1a; 若用到 margin:0 auto; 使页面居中#xff0c;若部分页面出现滚动条#xff0c;滚动条默认有 20px#xff0c;这样会造成页面抖动#xff1b;
解决办法#xff1a;参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值#xf…
总结 若用到 margin:0 auto; 使页面居中若部分页面出现滚动条滚动条默认有 20px这样会造成页面抖动
解决办法参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值 2. padding-left: calc(100vw - 100%); 自动计算滚动条的宽度并让主体左边距离页面该滚动条的宽度。 比如我想让画红框部分不受滚动条影响那么此时我就给这一部分添加这条样式。还可以写成 margin-left: calc(100vw - 100%); 当浏览器宽度比较小的时候左侧留的白明显与右边多此时做点响应式处理会更好一点
media screen and (min-width: 1150px) {.wrap-outer {margin-left: calc(100vw - 100%);}
}需要注意的是此时主体不需要再写 calc(100vw - 100%)。
3. 其他
html {overflow-y: scroll;
}:root {overflow-y: auto;overflow-x: hidden;
}:root body {position: absolute;
}body {width: 100vw;overflow: hidden;
}滚动条的样式设置 主要针对于 Google 浏览器 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块能向上向下移动或向左向右移动 ::-webkit-scrollbar-track 滚动条的轨道里面装有Thumb ::-webkit-scrollbar-button 滚动条的轨道的两端按钮由于通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道滚动条中间部分 ::-webkit-scrollbar-corner 边角即垂直滚动条和水平滚动条相交的地方 ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
/* 滚动条的宽度 */
#app::-webkit-scrollbar{width:4px;
}
/* 滚动的滑块 */
#app::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);
}
/* 外层轨道 */
#app::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);
}兼容 ie
#app{scrollbar-face-color: #1f7ebe; /*滚动条凸出部分的颜色*/scrollbar-highlight-color: #1f7ebe; /*滚动条空白部分的颜色*/scrollbar-shadow-color: #1f7ebe; /*立体滚动条阴影的颜色*/scrollbar-3dlight-color: #1f7ebe; /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/scrollbar-arrow-color: #1f7ebe; /*上下按钮上三角箭头的颜色*/scrollbar-track-color: #c1e2f1; /*滚动条的背景颜色*/scrollbar-darkshadow-color: #1f7ebe; /*滚动条强阴影的颜色*/scrollbar-base-color: #1f7ebe; /*滚动条的基本颜色*/
}
