PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967

| 积分获取 | 给我留言 | tag标签

关键字：备份技术立体 CSS 建议浏览器纵向导航图片放大缩略图

您现在的位置：首页 > 开发编程 > JavaScript教程 > 正文

javascript自定义滚动条效果

作者：admin来源：网络浏览：次时间：2020-09-30 00:07:50我要评论

导读：javascript自定义滚动条效果

window.onload=function(){
var oBtn=document.getElementById("barbtn");
var oBar=document.getElementById("bar");
var oBox=document.getElementById("box");
var oCon=document.getElementById("con");
var y=0;
oBtn.onmousedown=function(ev){
var ev=ev||event;
var disY=ev.clientY-oBtn.offsetTop;
document.onmousemove=function(){
var ev=ev||event;
y=ev.clientY-disY;
toRun();

}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}

function toRun(){
if(y<0)y=0;
if(y>oBar.offsetHeight-oBtn.offsetHeight)y=oBar.offsetHeight-oBtn.offsetHeight;
var scale=oBtn.offsetTop/(oBar.offsetHeight-oBtn.offsetHeight);
var maxH=oCon.offsetHeight-oBox.offsetHeight;
oBtn.style.top=y+"px";
oCon.style.marginTop=-scale*maxH+"px";
}
//滚轮事件
toWheel(oBox,function(down){
if(down){
y+=10;
}else{
y-=10;
}
toRun();
})
}

function toWheel(obj,fn){
var bDown=false;
if(window.navigator.userAgent.indexOf('Firefox')!=-1){
obj.addEventListener('DOMMouseScroll',fnWheel,false);
}else{
obj.onmousewheel=fnWheel;
}
function fnWheel(ev){
var ev=ev||event;
if(ev.detail){
if(ev.detail>0){
bDown=true;
}else{
bDown=false;
}
}else{
if(ev.wheelDelta>0){
//向上
bDown=false;
}else{
//向下
bDown=true;
}
}
fn&&fn(bDown);
}
}

<div class="box" id="box">
<div class="con" id="con">DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。
      </div>
      <div class="bar" id="bar">
        <span class="barbtn" id="barbtn"></span>
   </div>
</div>

转载请注明（B5教程网）原文链接：https://b5.mxunkeji.com/content-69-4901-1.html

相关热词搜索：

分享按钮

上一篇：9种原生js动画效果

下一篇：js闭包的理解

本周排行

关于我们

关于我们

赞助我们

加入我们

版权声明

联系我们

联系我们

QQ技术群

合作方式

广告服务

业务合作

常见问题

意见反馈

网站地图

在线投稿

积分获取

在线充值

本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
告知(634381967@qq.com)，我们会在第一时间处理！
© 苏ICP备20040182号
B5教程网版权所有