scroll系列
1.scrollTop是指当前盒子滚动条上面的高度,而clientHeight是指当前盒子一屏幕的高度,然后整个盒子的全部高度是scrollHeight,那么屏幕外的所有高度是scrollHeight-clientHeight,仔细想下,scrollTop的最大值也是这个,最小值是0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; overflow-y: scroll; } </style> </head> <body> <div id="box"> escape() 方法生成新的由十六进制转义序列替换的字符串。escape 函数是全局对象的属性. 特色字符如: @*_+-./ 被排除在外。字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示。大于的话则使用4位序列:%uxxxx 表示。 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 看看例子吧： JavaScript 代码: escape('abc123'); // "abc123" escape('äöü'); // "%E4%F6%FC" escape('ć'); // "%u0107" // special characters escape('@*_+-./'); // "@*_+-./" escape('~!@#$%^&*(){}[]=:/,;?+\'"\\') //%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C encode 方法： encodeURI() 是对统一资源标识符（URI）进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码（只有由两个代理字符区组成的字符才用四个转义字符编码）。 继续阅读 → </div> <script> var box = document.getElementById("box"); console.log(box.clientHeight); // 83 console.log(box.scrollHeight); // 1387 console.log(box.scrollTop); // 0 console.log(box.scrollHeight-box.clientHeight); // 1304 // 滚动条滚动到底部在控制台输入box.scrollTop,是等于box.scrollHeight-box.clientHeight </script> </body> </html>
2.回到顶部,即scollTop=0,用动画的形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; overflow-y: scroll; } #btn{ display: none; } </style> </head> <body> <div id="box"> escape() 方法生成新的由十六进制转义序列替换的字符串。escape 函数是全局对象的属性. 特色字符如: @*_+-./ 被排除在外。字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示。大于的话则使用4位序列:%uxxxx 表示。 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 看看例子吧： JavaScript 代码: escape('abc123'); // "abc123" escape('äöü'); // "%E4%F6%FC" escape('ć'); // "%u0107" // special characters escape('@*_+-./'); // "@*_+-./" escape('~!@#$%^&*(){}[]=:/,;?+\'"\\') //%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C encode 方法： encodeURI() 是对统一资源标识符（URI）进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码（只有由两个代理字符区组成的字符才用四个转义字符编码）。 继续阅读 → </div> <a href="javascript:;" id="btn">回顶</a> <script> var box = document.getElementById("box"); console.log(box.clientHeight); // 83 console.log(box.scrollHeight); // 1387 console.log(box.scrollTop); // 0 console.log(box.scrollHeight - box.clientHeight); // 1304 // 滚动条滚动到底部在控制台输入box.scrollTop,是等于box.scrollHeight-box.clientHeight var btn = document.getElementById("btn"); // 当scrollTop>一屏时显示按钮,否则不显示 box.onscroll = btnIsShow; function btnIsShow (e) { e = e || window.event; e.target = e.target || e.srcElement; btn.style.display = e.target.scrollTop>e.target.clientHeight?"block":"none"; } btn.onclick = function() { //点击按钮的时候,按钮消失 this.style.display = "none"; // 因为btnIsShow的事件触发,所以,必须解绑 box.onscroll = null; // box.scrollTop = 0; // 总时间t 总距离s // 每隔interval移动一次,总共移动 n=t/interval次,每次移动的具体就是 step=s/n // 每移动一次,走过的距离就会 +step var t = 500, target = 0, s = box.scrollTop - 0, interval = 10, n = t / interval, step = s / n; var timer = window.setInterval(function() { box.scrollTop -= step; if (box.scrollTop <= target) { box.scrollTop = target; window.clearTimeout(timer); // 再次绑定btnIsShow box.onscroll = btnIsShow; } }, interval) } </script> </body> </html>
3.跑马灯,单行文字在某个盒子里,横向循环滚动
- 首先写个有单行文字在某个盒子里有横向滚动条的demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ width: 300px; overflow-x: auto; // 滚动条 white-space: nowrap; // 保证是单行文字 } </style> </head> <body> <p> Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year. </p> </body> </html>
2.demo1的滚动条去掉,但是改变scollLeft的值还能看到其他的内容,上面的overflow-x:auto换成overflow:hidden
3.美化下加个边框什么的
p { width: 300px; /*overflow-x: auto;*/ overflow: hidden; white-space: nowrap; padding-left: 10px; padding-right: 10px; border: 1px dashed #f69; }
但是发现,右边的padding-right无效,怎么才能有效呢
就是再套个div,给div一个padding值 => 发现border还紧贴着,然后把border也丢给div => 发现div太大了,于是抛给它一个宽度,这样的话p就不用,因为会默认继承
p{ margin: 0; padding: 0; } div { padding-left: 10px; padding-right: 10px; border: 1px dashed #f69; width: 300px; } p { /*width: 300px;*/ /*overflow-x: auto;*/ overflow: hidden; white-space: nowrap; /* padding-left: 10px; padding-right: 10px; border: 1px dashed #f69;*/ }
记得这里加div的目的是,为了padding
4.p>(span+span),然后两个span里面的内容一模一样,且多于一行
<p id="para"> <span>Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> <span>Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> </p>
控制台输入para.scrollLeft = 1494,发现和para.scrollLeft = 0 一样,,也就是说如果我瞬间切换这两个状态,基本看不出来,想象一下,如果想循环,每次到1494的位置的时候就跳到0,这样就能一直循环,而不需要第三个span,那么接下来的一个问题是怎么找到1494的位置,其实就是第一个span的clientWidth,行内元素是没有这个属性的,需要将其变成行内块,于是,升级了下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { margin: 0; padding: 0; } div { padding-left: 10px; padding-right: 10px; border: 1px dashed #f69; width: 300px; } p { /*width: 300px;*/ /*overflow-x: auto;*/ overflow: hidden; white-space: nowrap; /* padding-left: 10px; padding-right: 10px; border: 1px dashed #f69;*/ } span { display: inline-block; } </style> </head> <body> <div> <p id="para"> <span id="start">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> <span id="end">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> </p> </div> <script> var para = document.getElementById("para"); var start = document.getElementById("start"); var end = document.getElementById("end"); // para.scrollLeft = 0; // start.clientWidth + end.clientWidth + 两个span之间的空格 = para.scrollWidth // 考虑到空格的影响,所以用下面的表达式,而不是start.clientWidth para.scrollLeft = para.scrollWidth - end.clientWidth; </script> </body> </html>
5.最后得到的跑马灯的效果
每当滚到第二个span的时候调到0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { margin: 0; padding: 0; } div { padding-left: 10px; padding-right: 10px; border: 1px dashed #f69; width: 300px; } p { /*width: 300px;*/ /*overflow-x: auto;*/ overflow: hidden; white-space: nowrap; /* padding-left: 10px; padding-right: 10px; border: 1px dashed #f69;*/ } span { display: inline-block; } </style> </head> <body> <div id="box"> <p id="para"> <span id="start">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> <span id="end">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span> </p> </div> <script> var box = document.getElementById("box"); var para = document.getElementById("para"); var start = document.getElementById("start"); var end = document.getElementById("end"); // para.scrollLeft = para.scrollWidth - end.clientWidth; var timer = null; play(); // 停止 function stop () { window.clearInterval(timer); } // 播放 function play () { timer = window.setInterval(function() { para.scrollLeft += 1; if (para.scrollLeft === para.scrollWidth - end.clientWidth) { para.scrollLeft = 0; } }, 10) } box.onmouseenter = stop; box.onmouseleave = play; </script> </body> </html>
