滚动条

转载自： https://www.cnblogs.com/Renyi-Fan/p/9206860.html 深入理解CSS溢出overflow 目录 一、总结 一句话总结：overflow用于对溢出内容的处理。 1、overflow有哪5个常用参数，分别是什么意思？ 二、深入理解CSS溢出overflow 前面的话 定义 属性 失效 应用 回到顶部 > 一、总结（点击显示或隐藏总结内容） 一句话总结：overflow用于对溢出内容的处理。 1、overflow有哪5个常用参数，分别是什么意思？ visible | hidden | scroll | auto | inherit visible 元素的内容在元素框之外也可见 auto 如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容 scroll 元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容 hidden 元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见 回到顶部 二、深入理解CSS溢出overflow 回到顶部 前面的话 　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 　　值: visible | hidden | scroll | auto | inherit 　　初始值: visible 　

li { width: 260px; height: 370px; border: 1px solid #D9D9D9; overflow-y: scroll; &::-webkit-scrollbar { width: 3px; } &::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 10px; } &::-webkit-scrollbar-track-piece { background: transparent; } } 效果图： 原理解释一波： 在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······ 下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性: 滚动条的设置 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece

基于 offsetHeight 和 clientHeight 判断是否出现滚动条 by: 授客 QQ ： 1033553122 HTMLEelement.offsetHeight简介 HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight HTMLEelement.clientHeight简介 这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。 clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 参考链接： https://developer.mozilla.org/zh-CN/docs

https://blog.csdn.net/tanmuxue/article/details/53155918 来源： https://www.cnblogs.com/liaolongfei/p/11316688.html

滚动 窗口的尺寸和滚动 窗口可视高度和宽度 document.documentElement 对应的标签是 html document.documentElement.clientHeight() document.documentElement.clientwidth() alert( window.innerWidth ); // 整个窗口的宽度 alert( document.documentElement.clientWidth ); // 窗口减去滚动条的宽度 一般使用去除掉滚动条的 document.documentElement.clientwidth() 兼容性更好的获取当前文档/页面水平方向已滚动的像素值，使用 console.log(window.pageXOffset) console.log(window.pageYOffset) 如何将窗口按照我们想的偏移量滚动呢？ Window.scrollBy(x,y) // 方法 scrollBy(x,y) 滚动页面至相对于现在位置的 (x, y) 位置。例如，scrollBy(0,10) 页面向下滚动 10px 滚动到窗口的某个坐标 window.scrollTo(pageX,pageY) // 方法 scrollTo(pageX,pageY) 滚动页面至相对于文档的左上角的 (pageX, pageY) 位置 /

一. offsetTop 属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。 返回值是一个整数，单位是像素。只读 二. offsetLeft 属性: 此属性和offsetTop的原理是一样的 三. offsetWidth 属性: 此属性可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。 四. offsetHeight 属性: 此属性可以获取元素的高度，高度值包括:元素内容+内边距+边框；不包括外边距和滚动条部分。 返回值是一个整数，单位是像素。只读 五. clientWidth 属性: 此属性可以返回一个元素的宽度值，值是:元素的内容+内边距；不包括边框、外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。 六. clientHeight 属性: 此属性可以返回一个元素的高度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。 七 .scrollLeft 属性: 此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。 返回值是一个整数，单位是像素。 此属性是可读写的。 八.

/*改变滚动条*/ #scroll { scrollbar-arrow-color: #f4ae21; /**/ /*三角箭头的颜色*/ scrollbar-face-color: #333; /**/ /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /**/ /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /**/ /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /**/ /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /**/ /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /**/ /*立体滚动条背景颜色*/ scrollbar-base-color: #f8f8f8; /**/ /*滚动条的基本颜色*/ overflow: auto; margin-bottom: 20px; } #scroll::-webkit-scrollbar { /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/ width: 10px; height: 10px; } #scroll::

说明 非标准属性，仅限webkit内核浏览器。 组成部分 一个完整滚动条右以下部分组成： ::-webkit-scrollbar 滚动条整体部分，常用属性：width,height,background,border； ::-webkit-scrollbar-button 滚动条两边的按钮，默认不设置时不显示，可设置高度、背景色、背景图片； ::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分； ::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分； ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分； ::-webkit-scrollbar-corner 边角； ::-webkit-resizer 定义右下角拖动块的样式 DEMO 简单演示DEMO，不好看： <style> /* 设置整个滚动条的一些属性，宽度针对垂直滚动条，高度针对水平滚动条 */ ::-webkit-scrollbar { width: 12px; height: 12px; } /* 滚动条顶部按钮的样式，如果不设置默认按钮不显示 */ ::-webkit-scrollbar-button { background-color: #FF945B; } ::-webkit-scrollbar-button

div上控制显示滚动条要结合overflow属性和布局、高/宽度 div的overflow、overflow-x、overflow-y样式 inherit：规定应该从父元素继承 overflow 属性的值。 hidden：永远不显示滚动条。内容会被修剪，并且其余内容是不可见的。 scroll：永远显示滚动条（至少有占位框）。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto：根据内容高度自动控制滚动条是否显示。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，并有可能导致布局发生改变。 visible（默认，不设置时）：内容不会被修剪，会呈现在元素框之外（子元素自身宽或高大于元素本身时）。 正常情况下，如果用了flex布局（Flexible Box，弹性盒子），就变成了一个弹性盒子，不需要手动设置滚动条相关属性，div内部内容多也没关系 flex 前端布局神器，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 flex容器内所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。这些项目会延flex-direction属性设置的主轴方向排列（即项目的排列方向） bootstrap提供的row等class其实就是给容器设置了flex属性 但是这个时候如果两个相邻的div，前者有margin属性