Vue получить относительное положение элемента страницы

Vue.js
Vue получить относительное положение элемента страницы

Сегодня в колонке исходного кода разработки я обнаружил, что необходимо получить относительную позицию и высоту элемента.Я обнаружил, что есть проблема с getBoundingClientRect.Он используется для получения набора позиций элемента относительно окно просмотра, которое не соответствует требованиям, которые я хочу.Если вы видите статью, написанную г-ном Руаном, об использовании Javascript для получения положения элементов страницы, очень хорошо решила мою проблему, и я также подробно рассказал о других методах.

проблема найдена

Когда я прокручиваю до позиции элемента, я хочу зафиксировать элемент в голове

// html 结构
<div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" ref="subnav">
     <ul>
        <li class="active"><a href="javascript:;">首页推荐</a></li>
        <li><a href="javascript:;">最新发布</a></li>
     </ul>
</div>

export default {
    data(){
        return {
            isFixed:false,
        }
    },	
    mounted(){
        if(this.$refs.subnav.getBoundingClientRect){
	    this.scrollTop(this.$refs.subnav.getBoundingClientRect())
        }
    },
    methods:{
	// 这是封装的一个方法
        scrollTop(h){
            console.log(h);
            this.utils.scrollTop((res)=>{
                this.isFixed = res.scrollH > h ? true :false;
            })
        }
    }
}

utils.js

// 该函数主要功能返回，滚动的高度以及文档占比窗口高度的百分比
utils.scrollTop = function(callback){
    // 页面总高
    var totalH = document.body.scrollHeight || document.documentElement.scrollHeight;
    // 可视高
    var clientH = window.innerHeight || document.documentElement.clientHeight;
    var result = {}
    window.addEventListener('scroll', function(e){
        // 计算有效高
        var validH = totalH - clientH
        // 滚动条卷去高度
        var scrollH = document.body.scrollTop || document.documentElement.scrollTop
        // 百分比
        result.percentage = (scrollH/validH*100).toFixed(2)
        result.scrollH = scrollH;
        callback && callback(result)
    })
}

image.png

Вы можете видеть, что элемент находится на высоте 595 пикселей сверху и отображается нормально. Когда я сначала прокручиваю определенное расстояние, а затем снова обновляю, положение полосы прокрутки также будет записывать предыдущую позицию, которая является верхней частью 195 пикселей, что также нормально, потому чтоgetBoundingClientRectпозиционируется в соответствии с окном браузера И я хочу обновить браузер независимо от того, где находится полоса прокрутки браузера, элементы dom, которые я связываю, расположены в соответствии с левым верхним углом документа.

image.png

offsetTop

Некоторые говорят, что в Интернете нужно использовать offsetTop.На самом деле offsetTop — это расстояние от текущего объекта до вершины его вышестоящего слоя. Ему нельзя присвоить значение.Для установки расстояния от объекта до верха страницы используйте свойство style.top

Получить расстояние элемента от верхней части документа

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。
DOMRect 对象包含了一组用于描述边框的只读属性: left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
getBoundingClientRect返回值
   top: 元素上边框距离视窗顶部的距离
   bottom: 元素下边框距离视窗顶部的距离
   left: 元素左边框距离视窗左侧的距离
   right: 元素右边框距离视窗左侧的距离

Так как getBoundingClientRect они будут соответственно изменяться по мере прокрутки области просмотра, тогда расстояние элемента от верхней части страницы равно , плюс расстояние прокрутки

this.$refs.subnav.getBoundingClientRect().top + window.scrollY; 
或者
this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;

window.scrollY не совместим с ie9, см.Window.scrollY

Измените приведенный выше код

if(this.$refs.subnav.getBoundingClientRect){
    var top1 =  this.$refs.subnav.getBoundingClientRect().top + window.scrollY
    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;
    console.log(top1)
    console.log(top2)
    this.scrollTop(top)
}

Эффект следующий: независимо от того, где находится полоса прокрутки, это относительный верхний левый угол документа.

image.png

Руан Ифэн

function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }

    return actualTop;
}

Принцип реализации

offsetTop может возвращать расстояние между элементом и свойством offsetParent, чтобы вернуть верхнюю часть элемента (если родительский элемент позиционирован, он вернет ближайший позиционированный элемент, в противном случае он вернет элемент body. Элемент может иметь несколько позиционированных элементов , которые нужно получать послойно рекурсивно на расстояние, то добавить

Специальное примечание:Вам нужно установить поля тела на 0, чтобы расстояние элемента от верхней части тела было равно расстоянию от верхней части документа.

Измените приведенный выше код

if(this.$refs.subnav.getBoundingClientRect){
    var top1 =  this.$refs.subnav.getBoundingClientRect().top + window.scrollY
    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;
    // getElementTop在上方 
    var top3 =  getElementTop(this.$refs.subnav)
    console.log(top1)
    console.log(top2)
    console.log(top3)
    this.scrollTop(top)
}

Эффект следующий

image.png

Суммируйте три метода, чтобы получить позицию элемента в верхней части документа.

dom.getBoundingClientRect().top + window.scrollY; 
或者
dom.getBoundingClientRect().top+document.documentElement.scrollTop;
或者
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

больше рекомендаций

Получить позицию элемента страницы с помощью Javascript
Получить расстояние элемента от верхней части страницы

обо мне

Навигация по сайту:www.vipbic.com/rank.html, включает более 1000 статей о разработке навигации по веб-сайту.

Категории