A-A+

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

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

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

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

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

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

chatboard 为显示容器的id

滚动样式,代码如下:

  1. <STYLE>  
  2. BODY {  
  3. SCROLLBAR-FACE-COLOR: #f892cc;  
  4. SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;  
  5. SCROLLBAR-SHADOW-COLOR: #fd76c2;  
  6. SCROLLBAR-3DLIGHT-COLOR: #fd76c2;  
  7. SCROLLBAR-ARROW-COLOR: #fd76c2;  
  8. SCROLLBAR-TRACK-COLOR: #fd76c2;  
  9. SCROLLBAR-DARKSHADOW-COLOR: #f629b9;  
  10. SCROLLBAR-BASE-COLOR: #e9cfe0  
  11. }  
  12. </STYLE>  

代码说明:

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滚动条自动滚动到最下部,代码如下:

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

再来一个js代码,代码如下:

  1. function GetPageScroll() {  
  2. var x, y;  
  3. if(window.pageYOffset) {  
  4. // all except IE  
  5. y = window.pageYOffset;  
  6. x = window.pageXOffset;  
  7. else if(document.documentElement  
  8. && document.documentElement.scrollTop) {  
  9. // IE 6 Strict  
  10. y = document.documentElement.scrollTop;  
  11. x = document.documentElement.scrollLeft;  
  12. else if(document.body) {  
  13. // all other IE  
  14. y = document.body.scrollTop;  
  15. x = document.body.scrollLeft;  
  16. }  
  17. return y;  
  18. }  

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

  1. function getMousePoint()  
  2.     {  
  3.        var point = {x:0,y:0};  
  4.          
  5.        // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离  
  6.        if(typeof window.pageYOffset != 'undefined') {  
  7.            point.x = window.pageXOffset;  
  8.            point.y = window.pageYOffset;  
  9.        }  
  10.        // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离  
  11.        // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat  
  12.        else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {  
  13.            point.x = document.documentElement.scrollLeft;  
  14.            point.y = document.documentElement.scrollTop;  
  15.        }  
  16.        // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度,如果是在ifram里面,用document.body可以获取iframe中滚动条的位置。  
  17.        else if(typeof document.body != 'undefined') {  
  18.            point.x = document.body.scrollLeft;  
  19.            point.y = document.body.scrollTop;  
  20.        }  
  21.        // 加上鼠标在视窗中的位置  
  22.        var event=window.event?window.event:evt;  
  23.        point.x += event.clientX;  
  24.        point.y += event.clientY;  
  25.          
  26.        // 返回鼠标在视窗中的位置  
  27.        return point;  
  28.     }  
标签:

1 条留言  访客:1 条  博主:0 条

  1. Leniy

    可以通过js跳转到页面的指定百分比处么

给我留言