滚动条 | 易学教程

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

阅读更多关于 js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

1、clientHeight：表示的是可视区域的高度，不包含border和滚动条； 2、offsetHeight：表示的是可视区域的高度，包含了border和滚动条 3、scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分； 4、clientTop：表示边框border的厚度，在未指定的情况下一般为0 5、srcollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标（css定位的元素或body元素）距离顶端的高度分析： clientHeight和offsetHeight属性和元素的滚动、位置没有关系，它代表元素的高度，其中： clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。接下来讨论出现有滚动条时的情况：当本元素的子元素比本元素高且overflow= scroll时，本元素会scroll，这时： scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度

页面滚动条的动态显示隐藏

阅读更多关于页面滚动条的动态显示隐藏

　　最近用html2canvas做图片的时候，发现生成的图片总是偏移了一点，后来发现是滚动条的占用问题　　之前提到可以用以下方式解决，但vue是单页面应用，所以使用后会导致所有页面滚动条都消失　　body::-webkit-scrollbar{ display: none; } 　　把以上代码放在需要页面使用，退出之后，样式还是会污染所有的滚动条样式　　使用 insertRule 进行修改，发现没什么用　　 insertRule ：给当前样式表插入新的样式规则 document.styleSheets[document.styleSheets.length-1].insertRule('body::-webkit-scrollbar { display: "" }', 0); 　　0表示插入cssrules的位置　　dispaly后面必须写正确的属性值(block)，设置为空就会失效，但是只有移除这个样式才能让滚动条显示，所以设置display："block"，width：1px都没用　　　　　　所以就在考虑换个方式解决，查了一些删除伪类样式方案后，最终解决方案是通过 document.styleSheets 进入页面时创建，离开时销毁　　 document.styleSheets ：只读属性，返回一个由 StyleSheet 对象组成的

iframe框架的居中、滚动条、多种浏览器、多个分辨率下所遇到的问题

阅读更多关于 iframe框架的居中、滚动条、多种浏览器、多个分辨率下所遇到的问题

让iframe居中，让iframe不显示滚动条，并且在多个浏览器下和多种分辨率下不变形、都能正常显示。忙了很久总算有了点成果，期间几度崩溃（较菜无怪= = ）。看了不少贴子，试了很多办法，在此总结如下，供给需要的人。吾测试用的浏览器为 IE ,TT,Firefox，一个例子如下： ----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml " > <head> <title>iframe tag test</title> <style type="text/css"> html,body,table,tr,td,div { width:100%; height:100%; overflow:hidden; margin:0px; } iframe { margin:0px; width:1003px; height:100%; overflow:hidden; } </style> </head> <body> <div style="text-align

js BOM

阅读更多关于 js BOM

JS BOM •BOM是Browser Object Model的缩写，简称浏览器对象模型 1. 能利用BOM做什么？ BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。 window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。因此调用它的子对象时可以不显示的指明window对象。 window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。 JavaScript中的任何一个全局函数或变量都是window的属性 window的子对象 •document 对象 •frames 对象 •history 对象 •location 对象 •navigator 对象 •screen 对象 window对象的方法 2. 窗体控制 moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体 moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域 resizeBy(w,h)—

jQuery学习笔记：CSS

阅读更多关于 jQuery学习笔记：CSS

一、 CSS 1、 css(name) 访问第一个匹配元素的样式属性。返回值 String 参数 name (String) : 要访问的属性名称示例： $("p").css("color"); //取得第一个段落的color样式属性的值 2、 css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。返回值 jQuery 参数 properties (Map) : 要设置为样式属性的名/值对示例： // 1 将所有段落的字体颜色设为红色并且背景为蓝色 $( " p " ).css({ color: " #ff0011 " , background: " blue " }); // 2 如果属性名包含 "-"的话，必须使用引号 $( " p " ).css({ " margin-left " : " 10px " , " background-color " : " blue " }); 3、 css(name,value) 在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值返回值 jQuery 参数 name (value) : 属性名 value (String, Number) : 属性值示例： $("p").css("color","red"); /

better-scroll在vue项目中的使用

阅读更多关于 better-scroll在vue项目中的使用

转载。 https://blog.csdn.net/qq_22557797/article/details/78866328 1、准备工作在项目中安装better-scroll: npm install --save better-scroll 组件中引入插件 import BScroll from "better-scroll"; 初始化完成后是这样子的 2、开始使用插件 dom结构 <div class="bscroll" ref="bscroll"> <div class="bscroll-container"></div> </div> 注：dom结构规定这样，滑动区域的内容放在bscroll-container中，否则，则可能不会成功部分css .bscroll{ width: 100%; height: 5vH; overflow: hidden; } 注：父级bscroll必须有高度，并且overflow为hidden; 插件使用 mounted(){ this.$nextTick(() => { let bscrollDom = this.$refs.bscroll; this.aBScroll = new BScroll(bscrollDom,{}) }) } 注： 1、插件初始化时需要具体元素，所以再DOM结构中使用ref标记元素，以备插件使用; 2

修改滚动条的样式

阅读更多关于修改滚动条的样式

CSS3 calc实现滚动条出现页面不跳动

阅读更多关于 CSS3 calc实现滚动条出现页面不跳动

本文转载于: 猿2048 网站 CSS3 calc实现滚动条出现页面不跳动什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。语法 calc() = calc(四则运算) 例如： .elm { width : calc(expression) ; } 其中"expression"是一个表达式，用来计算长度的表达式说明用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如： width: calc(100% - 10px) ；任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；兼容性简单的例子： <! DOCTYPE html > < html lang ="zh-cmn-Hans" > < head > < meta charset ="utf-8"

JQuery Offset实验与应用

阅读更多关于 JQuery Offset实验与应用

　　我们有时候需要实现这样一种功能：点击一个按钮，然后在按钮的下方显示一个div。当按钮位于角落时，div的位置设定就需要计算，使div完全显示。　　我打算使用offset()方法实现此功能，但要先弄清楚他的功能。实验：　　offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图1。　　图1：document高度超过window，window出现滚动条，拖动滚动条，提交按钮的offset().top不变，因为按钮与document上边缘距离未变。　　　　图2：document中的div有滚动条，提交按钮的offset().top随div滚动条变化而变化，因为按钮与document上边缘距离已变。　　　　offset().left 同理。　　通过上面的实验我们可以得出以下结论：offset() 获取元素(html 元素)距离document上边缘、左边缘的像素，我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery window、document、 body 应用：　　1.那么我们怎么保证元素完整的显示在浏览器视窗里呢？我们可以结合offset 和 scrollTop来实现。　　scrollTop获取的是什么值？根据我的实验，只有元素具有滚动条

设置scrollTop无效

阅读更多关于设置scrollTop无效

问题描述：页面刷新滚动条不返回到最初到位置而是返回之前浏览的位置要点：通过sessionStorage设置获取刷新页面前的滚动条位置 <div id="outterBox" style="width:100%;height:100%;background:yellow;overflow: auto"> <div id="innerBox" style="background:red">aaaa</div> </div> innerBox的高度由内容撑开且通过后端接口获取数据 ... // let scrollToTop = Number(window.sessionStorage.getItem('top')) ... getRebuildDataResultService(updateId, centerId).then(resp => { if (resp.errorcode == 100) { let respLog = resp.data && resp.data[0] && resp.data[0].log // respLog = respLog.join('<br/>') logs += '<div style="font-size:14px;font-weight:normal;">' logs += respLog logs += '</div>' let

订阅滚动条