滚动条事件window.onscroll

爱上猫的程序猿

已于 2023-05-12 11:42:10 修改

阅读量358

点赞数

文章标签： javascript html 前端

于 2023-05-12 11:36:52 首次发布

本文链接：https://blog.csdn.net/tang18533952786/article/details/130639026

版权

本文介绍了如何使用JavaScript和jQuery获取页面元素的绝对与相对坐标，以及处理滚动条事件。示例代码展示了当滚动条移动时，如何动态调整元素位置。同时，还涵盖了获取浏览器可视区尺寸、元素宽高以及滚动距离的方法。

摘要由CSDN通过智能技术生成

获取页面某一元素的绝对X,Y坐标

var X = $(‘#ElementID’).offset().top;
var Y = $(‘#ElementID’).offset().left;
获取相对(父元素)位置:
var X = $(‘#ElementID’).position().top;
var Y = $(‘#ElementID’).position().left;

相对浏览器，将指定div滚到到指定位置，其用法如下

$(“html,body”).animate({scrollTop: $(obj).offset().top},speed);

例：统战 DIV随滚动条位置高度发生变化

 // 答题卡位置随滚动条变化
      window.onscroll = function(){
        var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
        var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
        var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）
        var abc = $('.stb-content-test').offset().top;
        // 若滚动高度大于
        if(abc >= a){
          $('.stb-content-answer-div').css('top', aaa - a + 'px')
 
        }
        else{
          $('.stb-content-answer-div').css('top','0')
        }
      }

下面介绍一下常用的位置属性以及方法：

 1 、 获取浏览器可视区的宽高
    document.documentElement.clientHeight ; 
    document.documentElement.clientWidth ; 
 
 2 、获取内容区域可视区的宽高
    document.body.clientWidth/offsetWidth ; 
    document.body.clientHeight/offsetHeight ; 
    
 3 、获取元素的宽高
    <!--包含border+pdding-->
    obj.offsetWidth/obj.offstHeight ; 
    
    <!--包含padding-->
    obj.clientWidth/obj.clinetHeight ;
    
    <!--不包含border和padding-->
    window.getComputedStyle('div').width/height ; 

4 、获取滚动条的距离
    document.documentElement.scrollTop
    document.documentElement.scrollLeft
 
5 、获取元素的距离可视区的距离
    <!--包含滚动条的距离-->
    obj.offsetLeft/obj.offsetTop
     

 6、 设置滚动的距离：
  div.scrollBy(200, 0) //横向
  div.scrollBy(0, 200) //纵向
  
  7、滚动的位置：
  div.scrollTo(300,100)