用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>
好像是没有清空之前绑定的鼠标滚动事件造成的。

参考技术A 给你提个方案,检测到窗口大小改变的时候,刷新下滚动条试试 参考技术B 如果没有其他错误,你需要窗口onresize发生改变的时候再执行一次你的代码就行了本回答被提问者和网友采纳

关于“应用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实现无边框无滚动条登陆窗口”的问题?

踩坑:Listbox随窗体变小结果右侧滚动条消失

打开电脑所有的窗口滚动条会自动滚动是啥出了问题,急,在线等

针对模拟滚动条插件(jQuery.slimscroll.js)的修改

如何获取网页滚动条滚动事件

自定义滚动条