zoukankan      html  css  js  c++  java
  • js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)

     网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

    (javascript)        document.documentElement.scrollTop //firefox

    (javascript)        document.documentElement.scrollLeft //firefox

    (javascript)        document.body.scrollTop //IE

    (javascript)        document.body.scrollLeft //IE

    (jqurey)             $(window).scrollTop() 

    (jqurey)             $(window).scrollLeft()

     网页工作区域的高度和宽度  

    (javascript)       document.documentElement.clientHeight// IE firefox       

    (jqurey)             $(window).height()

     元素距离文档顶端和左边的偏移值  

    (javascript)        DOM元素对象.offsetTop //IE firefox

    (javascript)        DOM元素对象.offsetLeft //IE firefox

    (jqurey)             jq对象.offset().top

    (jqurey)             jq对象.offset().left

    获取页面元素距离浏览器工作区顶端的距离

     页面元素距离浏览器工作区顶端的距离  =  元素距离文档顶端偏移值  -   网页被卷起来的高度  

    即:

     页面元素距离浏览器工作区顶端的距离  DOM元素对象.offsetTop  -  document.documentElement.scrollTop 

    举个应用例子:(个人习惯用jqurey,免去兼容性烦恼)

    利用 页面元素距离浏览器工作区顶端/左端的距离 来实现一个提示框在页面不同位置时候保证提示信息显示的正确位置,如图所示 附代码

    可见不管输入框在哪里,提示框信息永远都显示在正确的位置,而不会在弹出提示框时候被挡住

    code(上面例子的html页面,需引用jquery-1.8.2.min.js)

  • 相关阅读:
    vue-cli(脚手架)学习
    vue-cli(脚手架)
    js时间戳转时间格式
    jQ获取窗口尺寸
    前端加密MD5
    vue项目准备工作(一)
    Oracle数据错删找回
    正则表达式匹配【全角字符】
    数据库分区、分表、分库、分片
    oracle的 分表 详解 -----表分区
  • 原文地址:https://www.cnblogs.com/lst619247/p/9282394.html
Copyright © 2011-2022 走看看