自定义浏览器滚动条的样式，打造属于你的滚动条风格
https://www.lyblog.net/detail/314.html 来源： https://www.cnblogs.com/muou2125/p/11712114.html
滚动条
CSS——元素的显示与隐藏
元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！ display 显示 display 设置或检索对象是否及如何显示。 display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： 隐藏之后，不再保留位置。 visibility 可见性 设置或检索是否显示对象。 visible : 对象可视 hidden : 对象隐藏 特点： 隐藏之后，继续保留原有位置。（停职留薪） overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 visible : 不剪切内容也不添加滚动条。 auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 来源： https://www.cnblogs.com/superjishere/p/11687561.html
滚动条出现挤压页面宽度，影响布局
问题描述：当页面突然出现滚动条的时候，页面会突然被挤压，因为滚动条也是需要占位的呀。 解决思路：现在目标就是滚动条出现，但是内容位置不变，依然不动。 * { margin: 0; padding: 0; } html { overflow-y: overlay; } .container { height: 200px; padding: 17px; background-color: #00b83f; text-align: right; } <div class="container"> <h1>我是容器内容</h1> </div> 1、新属性overlay chrome下 overflow 有个新的属性值 overlay ，这个属性简直就是为了这个问题而生，他和 auto 有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 2、margin-right: calc(100% - 100vw) 100vw 相对于浏览器的 window.innerWidth ，是浏览器的内部宽度，注意， 滚动条宽度也计算在内 ！而 100% 是可用宽度，是不含滚动条的宽度。没有滚动条的时候，相当于margin-right:0，没什么影响；有滚动条的时候就相当于margin-right:
Web全栈-背景缩写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景缩写</title> <style> div{ /*width: 500px;*/ /*height: 500px;*/ /* background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; background-position: left bottom; */ /*background: red url(images/girl.jpg) no-repeat left bottom;*/ /*background: red;*/ /*background: url(images/girl.jpg);*/ } body{ background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-attachment: scroll;*/ background-attachment:fixed; } </style> </head> <body> <!-- 1.背景属性缩写的格式 background: 背景颜色 背景图片 平铺方式
CSS设置滚动条样式
1.webkit浏览器 滚动条的属性 1. ::-webkit-scrollbar 滚动条整体部分，其中的属性: width,height,background,border等。 2. ::-webkit-scrollbar-button 滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 3. ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 4. ::-webkit-scrollbar-track-piece 内层滚动槽/轨道，需要注意的就是它会覆盖第三个属性的样式。 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边角，两个滚动条交汇处 7. ::-webkit-resizer 定义右下角拖动块的样式/两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上） 2.自定义滚动条效果 ::-webkit-scrollbar{ width:14px; background-color: #0e487c; } ::-webkit-scrollbar-thumb{ background-color: #4facfa; } 3.IE8设置滚动条
滚动条 样式
以前写网站 看别人的样式 就拿过来用了 可以设置滚动条样式 咱也不知道是干啥的 = = ctrl过来用就得了 ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-track:hover { background: #eee; } ::-webkit-scrollbar-thumb { border-radius: 10px; background: #b9b9b9; } ::-webkit-scrollbar-thumb:hover { background: #747474; } ::-webkit-scrollbar-thumb:active { background: #555; } 来源： https://www.cnblogs.com/chz1905/p/11666885.html
Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop
Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。 clientHeight 包含 padding scrollHeight scrollHeight的值在有滚动条的情况下包括滚动条滚动出去的内容，没有滚动条时是和 clientHeight 相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after 这样的伪元素。 有滚动条 scrollHeight 包含 溢出的内容+padding 没有滚动条 scrollHeight = clientHeight offsetHeight 包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 offsetHeight 包含 border+padding+元素的水平滚动条 scrollTop 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。 offsetTop 当前元素相对于其 offsetParent 元素的顶部内边距的距离
1.2.隐藏滚动条
1.1.1. 功能介绍 隐藏滚动条的样式，灰灰的那个条 1.1.2. 代码 ::-webkit-scrollbar {display:none} //隐藏滚动条 来源： https://www.cnblogs.com/Amanda-w/p/11647908.html
页面滚动scroll到最底部 - 加载更多数据
上拉内容区域，拉到底部实现分页功能，向后端请求更多数据加载到页面上 vue项目，使用纯js实现，网上显示了很多插件可以实现，我使用了几个，都不是我需要的效果，可能没研究明白，没办法只能原生实现，具体实现思路如下~ 思路：通过滚动条判断是否到内容底部 => 到底部后向后台请求下一页得数据 => 将请求得新数据拼接在老数据上 特别：需要判断请求的页数是否为第一页，如果是第一页不要拼接 怎么判断滚动条是否到最底部： 三个关键的点： 1：滚动条距离顶部的距离：document.documentElement.scrollTop||document.body.scrollTop 2：当前窗口内容的可视区域：document.documentElement.clientHeight || document.body.clientHeigh 3：滚动条内容的总高度：document.documentElement.scrollHeight||document.body.scrollHeight 一个关键函数： 一个监听滚动函数：window.addEventListener('scroll',()=>{}) 一个判定的等式：滚动条距离顶部 + 窗口可视区域 == 滚动条内容总高度，此时可以判定滚动条已经滚动到最底部 created(){ window.addEventListener(
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y: scroll;overflow-x: hidden; 然后再设置外层div的width小于内层div的width。 这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。 内层div效果： 套上外层div效果后： css代码： .nav_wrap{ height: 400px; width: 200px; overflow: hidden; border: 1px solid #ccc; margin: 20px auto; } .nav_ul{ height: 100%; width: 220px; overflow-y: auto; overflow-x: hidden; } .nav_li{ border: 1px solid #ccc; margin: -1px; height: 40px; line-height: 40px; text-align: center; font-size: