时间戳

首页 > 解决方案 > 文档上的水平滚动。准备使用 jQuery 进行活动链接

javascript - 文档上的水平滚动。准备使用 jQuery 进行活动链接

问题描述

如何自动水平滚动到 .active 链接 - 代码下方的完整问题。

我有这个 div 水平工作的列表。它在 Bootstrap 5 的移动设备上体面地水平滚动。

<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSlider">
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/">Luchtreinigers</a> &raquo;</div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-ionisator/">met ionisator</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-bevochtigingsfunctie/">met bevochtigingsfunctie</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="active" href="/luchtreinigers/seo-dir/">HORIZONTAL SCROLL TO THIS ONE</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-allergieen/">voor allergieën</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-astma/">voor astma</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.nav-scroller {
  position                   : relative;
  z-index                    : 2;
  overflow-y                 : hidden;
  }
.nav-scroller .nav {
  display                    : flex;
  flex-wrap                  : nowrap;
  overflow-x                 : auto;
  color                      : #333;
  text-align                 : left;
  white-space                : nowrap;
  -webkit-overflow-scrolling : touch;
  }

问题

我试图找到一种方法，当页面加载时，它会在#boxSlider（或.row .nav）中找到链接的活动类，并在页面加载后自动对其进行滚动中心。移动设备上的一个简洁功能可以指向人们选择的当前类别，默认情况下它显示在屏幕外。

到目前为止，已经尝试了在 document.Ready 上找到的各种代码，基本思想是这样的：

$(document).ready(function() {
    $(".nav").scrollCenter("a.active");
});

标签： javascriptjquery

解决方案

类似的东西？

document.querySelector('#boxSlider').scrollLeft = document.querySelector('a.active').closest('div.nav-scroller_box').offsetLeft


/*---


document.querySelector('a.active')
 .closest('div.nav-scroller_box')
 .scrollIntoView({ behavior: 'smooth' })

// or

document.querySelector('#boxSlider').scrollTo(
  {  left     : document.querySelector('a.active').closest('div.nav-scroller_box').offsetLeft
  ,  behavior : 'smooth'
  });

----- */
.nav-scroller {
  position                   : relative;
  z-index                    : 2;
  overflow-y                 : hidden;
  }
.nav-scroller .nav {
  display                    : flex;
  flex-wrap                  : nowrap;
  overflow-x                 : auto;
  color                      : #333;
  text-align                 : left;
  white-space                : nowrap;
  -webkit-overflow-scrolling : touch;
  }
.nav-scroller_box {
  padding : .5em;
  border  : 2px solid lightgrey;
  margin  : .2em;
}
.active {
  color   : red;
  }
<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSlider">
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/">Luchtreinigers</a> &raquo;</div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-ionisator/">met ionisator</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-bevochtigingsfunctie/">met bevochtigingsfunctie</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="active" href="/luchtreinigers/seo-dir/">HORIZONTAL SCROLL TO THIS ONE</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-allergieen/">voor allergieën</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-astma/">voor astma</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读