如何在没有滚动行为的情况下转到特定部分/没有滚动行为的 scrollIntoView() 的任何替代方法？

Posted 2023-02-22

【中文标题】如何在没有滚动行为的情况下转到特定部分/没有滚动行为的 scrollIntoView() 的任何替代方法？

【英文标题】：How to go to particular section without scrolling behavior / Any alternative to scrollIntoView() without scroll behavior?

【发布时间】：2021-11-09 10:07:00

【问题描述】：

我正在尝试创建到特定部分的页面重定向，即我想转到页面上的特定锚 div 而没有滚动行为。但是，我在 URL 中有一个用于分页的查询字符串，因此 #id 方法对我来说失败了。我尝试了“scrollIntoView()”，但它包含页面滚动行为，这是不受欢迎的。请问有没有其他办法可以解决这个问题？

我在前端使用 Vue，后端使用 Codeigniter。这是我的代码：

        mounted() 
            // anchorPageToProductList
            if (this.isOnQuery) 
                console.log('isOnQuery');
                this.scrollToProductList();
             else 
                console.log('isNotOnQuery');
            
            
        ,

methods: 
   scrollToProductList()
       window.addEventListener('DOMContentLoaded', () => 
       // scroll animation
       document.getElementById('product-list-anchor').scrollIntoView(true);
     );
,

我的 URL 案例示例：

http://www.example.com/Product/list?search=&sort=3&type=-1&event%5B%5D=11&pagination=1

谢谢！！

【问题讨论】：

如果你不想滚动，那么你需要将内容复制到我认为的视口中的容器中

您可以取消滚动行为，然后滚动，然后将滚动行为重置为初始值

您应该能够使用#id URL 方法。有关正确顺序，请参阅：anatomy of a URL。你现在头疼得怎么样了？

查询字符串不会影响哈希锚的工作方式。你到底尝试了什么？

大声笑，感谢所有试图减轻我头痛的 cmets xD

【参考方案1】：

我尝试取消设置滚动行为，让页面跳转到所需的部分，然后重新设置平滑滚动行为。所以它现在可以在没有滚动行为的情况下工作。感谢所有的cmets:)

我的代码：

scrollToProductList()

  window.addEventListener('DOMContentLoaded', () => 

      // select the whole html & disable smooth-scroll behavior in css
      let htmlElement = document.querySelector('html');
      htmlElement.style.scrollBehavior = 'auto';

      // go to the anchor point
      document.getElementById('product-list-anchor').scrollIntoView(true);

      // enable smooth-scroll behavior again
      htmlElement.style.scrollBehavior = 'smooth';

  );