Question

我正在使用很棒的vue-scrollto和bootstrap。在台式机上查看时，它的效果很好，并且可以完美着陆。但是，在移动设备上，标题不在顶部。我从以前的动态滚动经验中知道，填充标题是必经之路，它在我网站的一个部分中有效，而在另一部分中则无效。

我认为可能是因为我正在动态加载内容并将内容添加到dom中，但似乎不是问题，因为其他静态部分也存在同样的问题。似乎是内容部分比视口高。我原本以该部分的容器ID为目标，但没有更改就将其更改为标题的ID。

如果我添加偏移量，则可能会有所帮助，但不一致-在about部分起作用，但是locations部分仍然遥不可及。我认为它只会将我要定位的容器的顶部滚动到页面顶部，但这似乎不是正在发生的事情。

示例链接：

     <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

似乎任何比视口高的部分都无法正确着陆-就像它位于垂直中心一样，而不是滚动以将目标元素的顶部放置在视口的顶部，这是理想的选择

Answer 1

我想出了一个解决方案-不太优雅，我怀疑这是最好的解决方案，但是它确实有效，并且给了我非常精确的控制权。我创建了一个像这样的根方法：

    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);

    },

然后我要么通过我的laravel刀片模板直接从HTML调用它：

        <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>

我仍然不太了解它的工作原理-如果要从页面顶部或底部进行链接，则必须使用不同的偏移值以使其正确放置。

Answer 2

一个更优雅的解决方案是将<b-navbar>固定在顶部并偏移内容div：

<b-navbar class="fixed-navbar"> ... </b-navbar>

.fixed-navbar {
  top: 0;
  position: fixed;
  width: 100%;
}

要使导航栏不与内容重叠，请向nuxt元素添加边距

<Nuxt style="margin-top: 56px" />

也不要忘记在配置中为vue-scrollTo添加偏移量

['vue-scrollto/nuxt', { offset: -56 }]

vue-scrollto无法在移动设备上排列-仅在移动设备上偏移？

2 个答案: