用js自己定义了一个滚动条,但是在窗口变小,然后再到全屏时,用鼠标滚轮无法把滚动条滚到底部去了。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用js自己定义了一个滚动条,但是在窗口变小,然后再到全屏时,用鼠标滚轮无法把滚动条滚到底部去了。相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html,body width:100%; margin:0; padding:0; overflow: hidden; </style></head><body> <div style='width:7px;height:80px;position:fixed;right:0;top:0;background:#6cb670;border-radius:4px;z-index:10;' id='mouseScroll'></div> <div style='width:100%;padding-right:12px;position:relative;left:0;top:0;' id='content'> <script> for(var i=0; i<60; i++) document.write(i+'<br/>'); </script> </div></body><script type="text/javascript">function _setScroll() var _scroll = document.getElementById('mouseScroll'); var body = document.getElementsByTagName('body')[0]; var content = document.getElementById('content'); var docHei = content.offsetHeight; var winHei = window.innerHeight; var sh = winHei-_scroll.offsetHeight;//滚动条top属性的最大值 var top; var point;//滚动条 位置与窗口高度 的比例 //滚动条位置设置 function scrollTop(mTop) //限制滚动条 Y轴的滚动范围 mTop <=0 ? mTop=0 : mTop; mTop >= sh ? mTop=sh : mTop; point = Math.abs(mTop/sh); _scroll.style.top=mTop+'px'; content.style.top=-point*docHei+'px'; //滚轮事件回调函数 function bodyScroll(ev) var oEvent = ev || event; var bDown;//兼容 滚动方向 // IE chrome firefox //oEvent.wheelDelta oEvent.detail bDown= oEvent.wheelDelta ? oEvent.wheelDelta<0 : oEvent.detail>0; if(bDown) scrollTop(_scroll.offsetTop+80); else scrollTop(_scroll.offsetTop-80); //滚轮事件绑定 function mouseScroll(obj, ev, fn) if(obj.addEventListener) obj.addEventListener(ev, fn, false); else obj.attachEvent('on'+ev, fn) //拖滚动条 docHei = docHei-winHei; _scroll.onmousedown=function() document.onmousemove=function(ev) var oEvent = ev || event; top =oEvent.clientY; scrollTop(top); document.onmouseup=function() document.onmousemove=null; document.onmouseup=null; return false;//阻止鼠标按下时选中文本 window.onresize=function() _setScroll(); mouseScroll(content,'mousewheel',bodyScroll); mouseScroll(content,'DOMMouseScroll',bodyScroll);;_setScroll();</script></html>
好像是没有清空之前绑定的鼠标滚动事件造成的。
关于“应用CSS+DIV实现无边框无滚动条登陆窗口”的问题?
出现问题:
点击登陆的时候,弹出登陆窗口,但是在判断用户名、密码、验证码不正确,按“确定”返回时,就被自动关掉了登陆窗口,这是为什么呢?
<div style=\'display:block;width:200px; height:300px;\'>
<input type=\'button\' onclick="this.parentNode.style.display=\'none\'" value="close me" />
</div> 参考技术A 你的确定对话框后面写的是
window.history(-1);
这个是返回上一页...
只能用AJAX作提交.要的话可以联系我.简单包装的AJAX函数 参考技术B 你是用 form提交的吧?form提交会刷新当前窗口,你用ajax提交,验证失败,弹出对话框,然后取消别的操作return false什么的,就可以了.不行把代码贴出来给你看看
以上是关于用js自己定义了一个滚动条,但是在窗口变小,然后再到全屏时,用鼠标滚轮无法把滚动条滚到底部去了。的主要内容,如果未能解决你的问题,请参考以下文章
关于“应用CSS+DIV实现无边框无滚动条登陆窗口”的问题?