vue-scrollto не выстраивается в очередь на мобильном телефоне - смещение только для мобильного? - PullRequest
Новая
       10

vue-scrollto не выстраивается в очередь на мобильном телефоне - смещение только для мобильного?

0 голосов
/ 11 ноября 2018

Я использую замечательный vue-scrollto вместе с начальной загрузкой.Он отлично работает и отлично смотрится при просмотре на рабочем столе.На мобильном, однако, заголовок не на вершине.Из предыдущего опыта с динамической прокруткой я знаю, что заполнение заголовка - это путь, который работает в одном разделе моего сайта, но не в другом.

Я подумал, что, возможно, это потому, что я загружаю контент динамически и добавляю контент в dom, но, похоже, это не проблема, поскольку другие статические разделы имеют ту же проблему.Похоже, что когда содержимое раздела выше, чем область просмотра.Первоначально я ориентировался на идентификатор контейнера для раздела, но изменил его на идентификатор заголовка без изменений.

Если я добавлю смещение, это может помочь, но непоследовательно - работает в разделе about, но в разделе местоположенийеще далекоЯ подумал, что это будет просто прокрутить верхнюю часть контейнера, на который я нацеливаюсь, в начало страницы, но, похоже, это не то, что происходит.

Пример ссылки: 

     <li class="nav-item">
        <a class="nav-link nav-btn" href="#" v-scroll-to="'#title-about'" data-toggle="collapse">About</a>
    </li>

В моем app.js: 

Vue.use(VueScrollTo, {
 container: "body",
 offset: -100
})

Вы можете увидеть это в действии здесь: lovelaundry

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

1 Ответ

0 голосов
/ 12 ноября 2018

Я нашел решение - не очень элегантное, и я сомневаюсь, что оно лучшее, но оно работает и дает мне довольно точный контроль. Я создал корневой метод так: 

    scrollTo(target, offset1 = -100, offset2 = -450) {
        //viewport break is 991, offset1 is when greater then 991 for larger viewports, offset2 for smaller
        console.log('1: ' + offset1 + ' | ' + '2: ' + offset2);
        if (window.innerWidth > 991) {
            this.os = offset1;
        } else {
            this.os = offset2;
        }
        console.log(this.os);
        var options = {
            container: 'body',
            offset: this.os
        }
        var cancelScroll = VueScrollTo.scrollTo(target, 500, options);

    },

Затем я вызываю это непосредственно из HTML через мой шаблон лезвия Laravel: 

        <a class="nav-link nav-btn" href="#" v-on:click="scrollTo('#title-about', -100, -250)" data-toggle="collapse">About</a>

Или передать его родителю из компонента: 

        changeLocation(location) {
                this.$eventHub.$emit('location-loaded', location);
                this.$eventHub.$emit('scroll-to', '#title-locations', -100, -450);              
        },

В шаблоне: 

<a v-for="loc in locations" v-on:click="changeLocation(loc)" class="dropdown-item nav-btn" v-bind:class="{ active: loc.id == location.id }">{{ loc.name }}</a>

Я до сих пор не совсем понимаю, как это работает - мне приходится использовать разные значения смещения, чтобы оно попадало в нужное место, если я делаю ссылки сверху или снизу страницы.

...