vue-scrollto 不在移动设备上排队 - 仅移动设备的偏移量？

Posted 2023-02-23

【中文标题】vue-scrollto 不在移动设备上排队 - 仅移动设备的偏移量？

【英文标题】：vue-scrollto not lining up on mobile - offset for mobile only?

【发布时间】：2019-04-14 13:06:46

【问题描述】：

我正在使用美妙的 vue-scrollto 和 bootstrap。在桌面上查看时，它运行良好并且完美落地。然而，在移动设备上，标题不在顶部。我从以前的动态滚动经验中知道，填充标题是要走的路，它适用于我网站的一个部分，但不适用于另一个部分。

我想可能是因为我正在动态加载内容并向 dom 添加内容，但似乎不是问题，因为其他静态部分也有同样的问题。当内容部分高于视口时，似乎确实如此。我最初的目标是该部分的容器 id，但将其更改为标题的 id，没有任何变化。

如果我添加偏移量，它会有所帮助，但不一致 - 适用于 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】：

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

    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>

我仍然不太明白它是如何工作的——如果我从页面顶部或底部进行链接，我必须使用不同的偏移值来使其位于正确的位置。

【参考方案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 ]