框架中怎么获取scrollTop、scrollLeft

njxiaoxiong 2010-06-13 02:22:09
现在要在模板页里弹出类似qq的提醒的div，放在模板页里是为了每个页面都要有提醒，但我的模板页是写在框架里的，现在出现问题了，虽然是弹出来了，但是，总是在页面的最底部 ，非得滚动屏幕才看得见？？？我对js中怎么获取高度 宽度不怎么清楚。
有什么高招，请各位赐教。
...全文
148 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
baobei7758 2010-06-13
  • 打赏
  • 举报
 回复
document.getElementById("Layer1").style.left= document.body.scrollLeft+event.clientX;//这个就是鼠标当前坐标的X轴坐标。

document.getElementById("Layer1").style.top = document.body.scrollTop+event.clientY;
njxiaoxiong 2010-06-13
  • 打赏
  • 举报
 回复
不熟！！！！！！！！！！
myhope88 2010-06-13
  • 打赏
  • 举报
 回复
网上搜索下吧，应该挺多的吧
kkbac 2010-06-13
  • 打赏
  • 举报
 回复
用jq取值.很方便.
Overthrow:微小，简洁，独立于框架的目标溢出
推翻 与框架无关的overflow: auto用于响应设计的overflow: auto polyfill。 Filament Group发行说明： 许可证： 版权所有2013：Scott Jehl，Filament Group，Inc.。 请参阅项目站点以获取详细文档。 项目目标 Overthrow的目标很简单：创建一种可靠的方法来安全地在响应式设计中使用CSS溢出，在可能的情况下在非本机环境中提供填充支持，否则，让内容随页面的其余部分滚动）。 特征 轻量，解耦JavaScript MIT许可证：随处使用。 专为响应式设计而设计：可安全用于跨设备开发 与框架无关：可与任何JS库一起使用，或根本不使用！ 本机的scrollTop和scrollLeft：使用本机JavaScript scrollTop和scrollLeft属性，而不是使用CSS属性来模拟滚动。 这意味着您可以使用
解决ASP.NET AJAX在frame及iframe中跨域访问的问题
1、为ScriptManager添加脚本引用，不从ScriptResource.axd中加载MicrosoftAjax.js脚本，而是直接加载 2、修改MicrosoftAjax.debug.js 删除 switch(Sys.Browser.agent) { case Sys.Browser.InternetExplorer:与 case Sys.Browser.Safari: 之间的脚本，替换为如下脚本： Sys.UI.DomElement.getLocation = function(element) { if (element.self || element.nodeType === 9) return new Sys.UI.Point(0,0); var clientRect = element.getBoundingClientRect(); if (!clientRect) { return new Sys.UI.Point(0,0); } var ownerDocument = element.document.documentElement; var offsetX = clientRect.left - 2 + ownerDocument.scrollLeft, offsetY = clientRect.top - 2 + ownerDocument.scrollTop; try { var f = element.ownerDocument.parentWindow.frameElement || null; if (f) { var offset = 2 - (f.frameBorder || 1) * 2; offsetX += offset; offsetY += offset; } } catch(ex) { } return new Sys.UI.Point(offsetX, offsetY); } break; 3、修改MicrosoftAjax.js 删除 switch(Sys.Browser.agent){case Sys.Browser.InternetExplorer:与 case Sys.Browser.Safari: 之间的脚本，替换为如下脚本: Sys.UI.DomElement.getLocation=function(a){if(a.self||a.nodeType===9)return new Sys.UI.Point(0,0);var b=a.getBoundingClientRect();if(!b)return new Sys.UI.Point(0,0);var c=a.document.documentElement,d=b.left-2+c.scrollLeft,e=b.top-2+c.scrollTop;try{var g=a.ownerDocument.parentWindow.frameElement||null;if(g){var f=2-(g.frameBorder||1)*2;d+=f;e+=f}}catch(h){}return new Sys.UI.Point(d,e)};break;
DhtmlxTree-dhtmlxmenu实现在节点上右键弹出菜单
对dhtmlXTree进行一个小的扩展 需求1: 动态生成树形菜单，每个节点都有各自的URL地址，单击不同的节点框架页的右侧跳转到该节点所对应的URL。（框架页说明：左边是树形菜单；右边是显示页面相应信息的页面） 分析： dhtmlXTree提供了很好的添加，删除节点的方法，故选择dhtmlXTree。 但是dhtmlXTree不能满足"每个节点都有各自的URL地址，单击不同的节点框架页的右侧跳转到该节点所对应的URL"这点需求，因次想到了对dhtmlXTree进行一个小的扩展，即在其节点对象原有属性的基础上，再添加两个扩展属性。具体操作如下： 1、找到定义节点对象的那个函数（或方法） function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode) 修改为 function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode,url,target) 并在方法体中添加赋值语句:this.itemURL=url;this.itemTarget=target; 2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注：_parseXMLTree方法是与loadXML,loadXMLString相关的。 在这些方法中生成节点的语句中添加相应的参数和语句，以支持新添加的属性itemURL,itemTarget。 需求2: 为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单，空白区域单击时不会生成菜单。 分析： 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码： var menu = new dhtmlXMenuObject(); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone("treeboxbox_tree"); menu.addContextZone方法是为了把菜单添加到指定区域。 3、dhtmlXTreeObject.prototype._createItem方法是构造树形菜单上元素的具体实现方法。看这个方法的具体操作，可以发现它为每一个节点构建了一个table，节点的内容(即名字)放置在一个span中。 4、考虑到dhtmlxmenu实在指定的区域构建菜单，所以可以为dhtmlXTree树上的每一个节点添加右键事件，在这个右键事件里获得该节点对象所对应的区域，然后在这个区域内构建Menu菜单。 难点和解决方案： 1、怎样获得dhtmlXTree树上的每一个节点对象所对应的区域?(dhtmlXTreeObject.prototype._createItem方法没有为这个节点的span设置id) 解决方法： 在dhtmlXTreeObject.prototype._createItem方法中添加一个为span设置id的语句： 即： 在itemObject.span=document.createElement('span'); itemObject.span.className="standartTreeRow"; 后，新添加一句 itemObject.span.id="treeNode_"+itemObject.id;//为这个span新增一个Id属性 2、为dhtmlXTree树上的每一个节点添加右键事件，在这个右键事件里获得该节点对象所对应的区域，然后在这个区域内构建Menu菜单。 解决方法： a、为dhtmlXTree树上的每一个节点添加右键事件： tree.setOnRightClickHandler(treeOnRegihtClick);//右键事件 b、构建Menu菜单： var menu = new dhtmlXMenuObject(); function treeOnRegihtClick(id){ alert("右键 "+" span.id:"+tree.getItem(id).span.id); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone(tree.getItem(id).span.id);alert("width:"+tree.getItem(id).span.clientWidth); //var X=tree.getItem(id).span.getBoundingClientRect().left; //var Y=tree.getItem(id).span.getBoundingClientRect().top; var X=document.getElementById('mouseXPosition').value;//获得鼠标的横坐标位置 var Y=document.getElementById('mouseYPosition').value;//获得鼠标的纵坐标位置 menu.showContextMenu(X,Y);//调用showContextMenu方法显示菜单 说明：如果这儿不加上这条语句的话，第一次点击右键时只能生成菜单，但是显示不出菜单，下次点击右键Menu菜单才能弹出。 //menu._showContextMenu(X,Y,tree.getItem(id).span.id); } c、用 javascript 获取当页面上鼠标（光标）位置 <script type="text/javascript"> // 说明：获取鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('mouseXPosition').value = mousePos.x; document.getElementById('mouseYPosition').value = mousePos.y; }
Js之完美运动框架(包括scrollTop)
Js之完美运动框架(包括scrollTop) //多物体运动 链式/同时运动 function namex(obj, json, fn) { clearInterval(obj.time); obj.time = setInterval(function () { var cur = 0,speed =0; flag = true; for (var attr in json)
scrolltop 原生js_js原生之scrollTop、offsetHeight和offsetTop等属性用法详解
scrollTop、offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。先来看一张比较经典的示意图:下面结合各上图介绍一下各个属性的作用:一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父...
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章