扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关使用JavaScript怎么实现一个滚动条,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联专注于企业全网营销推广、网站重做改版、郸城网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站制作、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为郸城等各大城市提供网站开发制作服务。
1、滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算
2、滚动条 bar 的 top 位置 和 内容scrollTop 的关系。
思路:
使用嵌套的布局,如下:
内容1内容2内容3
wrap 为最外层,给overflow:hidden;。
box-middle 是中间层,也是有滚动条的一层,可以宽度给多一点,这样就看不见滚动条了。
box就是内容层,通过js,计算使得 box 的宽度和wrap 保持一致,这样就完全看不见滚动条了
bar 为滚动条
写js之前,首先要弄懂一下三个属性:
offsetHeight : height + padding + border clientHeight : height + padding scrollHeight : 内容的高度(所有子元素高度和) + padding
1、计算比例:
bar的高度 / wrap的高度 = wrap的高度 / wrap 内容部子元素的高度和 ; 此时忽略 wrap 的padding:0
bar的top / wrap的scrollTop = wrap的高度 / wrap 内容部子元素的高度和 ;
需要注意,当比例 的 值 小于 1 的时候,说明 这个时候没有出现滚动条。
知道算法之后,写代码就简单很多,普通版代码如下:
var $wrap = document.getElementById("wrap"); var $boxMidle = document.getElementById("boxMidle"); var $content = document.getElementById("content"); var $bar = document.getElementById("bar"); $content.style.width = $wrap.clientWidth + "px"; //内容的宽度 var rate = $boxMidle.clientHeight/ $boxMidle.scrollHeight; //滚动条高度的比例,也是滚动条top位置的比例 var barHeight = rate * $boxMidle.clientHeight; //滚动条的 bar 的高度 if(rate < 1){ //需要出现滚动条,并计算滚动条的高度 $bar.style.height = barHeight + "px"; }else{ //不需要出现滚动条 $bar.style.display = "none"; } $boxMidle.onscroll = function(e){ console.log("offsetHeight"+this.offsetHeight); //height + padding + border console.log("clientHeight"+this.clientHeight); // height + padding console.log("scrollHeight"+this.scrollHeight); //内容的高度(所有子元素高度和) + padding console.log(this.scrollTop); $bar.style.top = this.scrollTop*rate + "px"; }
使用面向对象版:
function ScrollBar(opt){ var me = this; me.$wrap = document.getElementById(opt.wrap); me.$boxMidle = document.getElementById(opt.boxMidle); me.$content = document.getElementById(opt.content); me.$bar = document.getElementById(opt.bar); me.init(); me.$boxMidle.onscroll = function(e){ //console.log("offsetHeight"+this.offsetHeight); //content + padding + border //console.log("clientHeight"+this.clientHeight); // content + padding //console.log("scrollHeight"+this.scrollHeight); //内容的高度 + padding console.log(this.scrollTop); me.scrollToY(this.scrollTop * me.rate) } } ScrollBar.prototype.init = function(){ this.$content.style.width = this.$wrap.clientWidth + "px"; //内容的宽度 this.rate = this.$boxMidle.clientHeight/this.$boxMidle.scrollHeight; //滚动条高度的比例,也是滚动条top位置的比例 this.barHeight = this.rate * this.$boxMidle.clientHeight; //滚动条的 bar 的高度 if(this.rate < 1){ //需要出现滚动条,并计算滚动条的高度 this.$bar.style.height = this.barHeight + "px"; }else{ //不需要出现滚动条 this.$bar.style.display = "none"; } } ScrollBar.prototype.scrollToY = function(y){ if(this.rate < 1){ this.$bar.style.top = y + 'px'; } } var obj = new ScrollBar({"wrap":"wrap","boxMidle":"boxMidle","content":"content","bar":"bar"});
以上就是使用JavaScript怎么实现一个滚动条,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流