一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

javascript控制滚动条与获取控件的位置

时间:2012-12-02 编辑:简简单单 来源:一聚教程网

ie 6 需要用document.documentElement.scrollTop 获取滚动条位置
ie 其他版本可以用 document.body.scrollTop 获取滚动条位置
其他浏览器可以用 window.pageYOffset 获取滚动条位置

当聊天室的内容超出页面范围时,
如何让页面刷新后
显示最下面的内容

 代码如下 复制代码

 document.getElementById ( 'chatboard').scrollTop=document.getElementById ( 'chatboard').scrollHeight ;

chatboard 为显示容器的id

  滚动样式:

 代码如下 复制代码
   代码说明:
SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR:

JS控制滚动条的位置:
window.scrollTo(x,y);

竖向滚动条置顶(window.scrollTo(0,0);
竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight)

JS控制TextArea滚动条自动滚动到最下部

 代码如下 复制代码

document.getElementById('textarea').scrollTop = document.getElementById('textarea').scrollHeight;

再来一个js代码

 代码如下 复制代码
function GetPageScroll() {
var x, y;
if(window.pageYOffset) {
// all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement
&& document.documentElement.scrollTop) {
// IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) {
// all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return y;
}

如下是定位鼠标在视窗中的位置,先定位视窗和页面直接的距离。  

 代码如下 复制代码

   function getMousePoint()
       {
          var point = {x:0,y:0};
         
          // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
          if(typeof window.pageYOffset != 'undefined') {
              point.x = window.pageXOffset;
              point.y = window.pageYOffset;
          }
          // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
          // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
          else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
              point.x = document.documentElement.scrollLeft;
              point.y = document.documentElement.scrollTop;
          }
          // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度,如果是在ifram里面,用document.body可以获取iframe中滚动条的位置。

          else if(typeof document.body != 'undefined') {
              point.x = document.body.scrollLeft;
              point.y = document.body.scrollTop;
          }
          // 加上鼠标在视窗中的位置
          var event=window.event?window.event:evt;
          point.x += event.clientX;
          point.y += event.clientY;
         
          // 返回鼠标在视窗中的位置
          return point;
       }     

热门栏目