Vue 获取当前距离屏幕顶部的距离

àì夳堔傛蜴生んèń 2022-11-28 13:24 782阅读 0赞

###  [ 获取当前距离屏幕顶部的距离][Link 1] ###

<template>
        <div ref="obtain"></div>
    <template/>
    
    <script>
    export default {
        data() {
            return {}
        },
        mounted() {
        　　// 滚动条的获取
        　　window.addEventListener('scroll', this.handleScrollx, true)
       },
        methods: {
            handleScrollx() {
              console.log('滚动高度', window.pageYOffset)
              console.log('距离顶部高度', this.$refs.obtain.getBoundingClientRect().top)
            }
        }
    }
    </ script>

获取当前页面高度

export default {
        data() {
            return {
                // 页面高度
                screenHeight: document.body.clientHeight,
                // 计算出的高度
                PageHeight: ''
            }
        },
        created() {
           this.GetHeight()
        },
        methods: {
            GetHeight() {
                // 根据页面高度计算  (可以自定义逻辑)
                this.PageHeight = (this.screenHeight)
            }
        }
    }

[Link 1]: https://www.cnblogs.com/qfcddl/p/13098740.html

发表评论取消回复

表情：

评论列表（有 0 条评论，782人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNI-APP_uni-app获取滚动条距离页面顶部位置，uni-app设置距离顶部位置

获取滚动轴距离页面顶部距离： onPageScroll生命周期函数 onPageScroll(res){ console.log(res.scroll

阳光穿透心脏的1/2处/ 2022年12月28日 08:10/ 0 赞/ 334 阅读

相关 CSS_css距离顶部一定距离悬停

position: sticky; position: -webkit-sticky; position: -moz-sticky; posit

古城微笑少年丶/ 2022年12月20日 11:29/ 0 赞/ 201 阅读

相关 VUE_vue设置距离顶部距离

在vue的hash模式下无法是a标签的锚点，可以使用这个代替开始这样写在微信浏览器测试没有反应，在h5可以正常使用 document.documentEle

Love The Way You Lie/ 2022年11月29日 11:54/ 0 赞/ 396 阅读

相关 Vue 获取当前距离屏幕顶部的距离

[ 获取当前距离屏幕顶部的距离][Link 1] <template> <div ref="obtain"></div> <templa

àì夳堔傛蜴生んèń/ 2022年11月28日 13:24/ 0 赞/ 783 阅读

相关获取当前时间距离目标时间的年月

// 月份不足十位的补零 function complementZero (num) { if (num > 0 && num < 10) {

野性酷女/ 2022年11月16日 13:42/ 0 赞/ 214 阅读

相关 js获取滚动条距离浏览器顶部,底部的高度

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一

素颜马尾好姑娘i/ 2022年07月16日 02:12/ 0 赞/ 323 阅读

相关 js获取可视化区域的宽和高以及滑动条距离顶部的距离

1.注意由于浏览器的多样性，所以我们在获取页面可视化区域的宽和高时，要在各个浏览器之间实现兼容。 2.与获取可视化区域宽、高一样，在我们获取页面滑动条距离顶部的距离的时候也会

亦凉/ 2022年06月15日 23:48/ 0 赞/ 194 阅读

相关获取当前位置到窗口顶部的距离

var offset=$(obj).offset();/获取某个位置到窗口顶部的距离，obj为当前dom 千万不能用obj.offsetTop,obj.off

ゝ一纸荒年。/ 2022年05月30日 08:51/ 0 赞/ 245 阅读

相关曼哈顿距离，欧式距离，余弦距离

![70][] ![70 1][] 1.曼哈顿距离曼哈顿距离又称马氏距离（Manhattan distance），还见到过更加形象的，叫出租车距离的。具见上图

客官°小女子只卖身不卖艺/ 2022年05月23日 08:25/ 0 赞/ 328 阅读

相关 Java 获取当前时间距离当天凌晨的秒数

在前期项目中遇到一个客户端与服务器间的时间同步问题，需要获取到当前时间与当天凌晨时间距离的秒数，写这篇文章主要是为了总结一下经验提升方便日后温习，以下是具体的测试代码： Ju

野性酷女/ 2022年05月22日 10:06/ 0 赞/ 251 阅读