A-A+

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

2016年01月27日前端设计评论 1 条阅读 6 views 次

本文章来介绍在css与javascript中控制滚动条的位置，获取控件的位置有需要的朋友可参考参考。

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 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;
}

夏日博客