我们为何需要小程序_JavaScript限制在客户区可见规

摘要: JavaScript限定在顾客区由此可见范畴的拖动(处理scrollLeft和scrollTop的难题)(2) 本文关键详细介绍了JavaScript限定在顾客区由此可见范畴的拖动,处理scrollLeft和scrollTop的难题,具备一...

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)       这篇文章主要介绍了JavaScript限制在客户区可见范围的拖拽,解决scrollLeft和scrollTop的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

div是body的子元素,div的left/top是针对body的,不是针对可见客户区的,所以在拖拽的过程中不得不考虑被卷走的部分,因为网页文档可能很大,无论宽度还是高度都可能大于客户区,等于客户区大小就很好处理,大于的话就得考虑scrollTop和scrollLeft,否则div会跟鼠标脱离,因为距离都算错了。

/*切记:凡是clientX/Y 的 一定记得卷走的部分*/
document.body是DOM中Document对象里的body节点,
document.documentElement是文档对象根节点(html)的引用,
document.documentElement.scrollHeight网页整体高度

function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:sl+ev.clientX, y:st+ev.clientY};
//getPos得到的是鼠标当前位置距离页面最左/上边的距离,包括被卷走的部分 function getPos(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return { x : scrollLeft + ev.clientX, y : scrollTop + ev.clientY function getScrollPos() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return { x : scrollLeft, y : scrollTop oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); var disX = pos.x - parseInt(getStyle(oDiv, 'left')); var disY = pos.y - parseInt(getStyle(oDiv, 'top')); document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; if (l 0) { l = 0; } else if (l document.documentElement.clientWidth - oDiv.offsetWidth) { l = document.documentElement.clientWidth - oDiv.offsetWidth; if (t 0) { t = 0; } else if (t document.documentElement.clientHeight - oDiv.offsetHeight) { t = document.documentElement.clientHeight - oDiv.offsetHeight; l = l + getScrollPos().x;//最后left是相对于body的,加上卷走的部分scrollLeft; t = t + getScrollPos().y;//加上卷走的高度scrollTop // oDiv.style.left = l + 'px'; // oDiv.style.top = t + 'px'; oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;'; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888

技术支持:公众号小程序