使用“scrollIntoView”进行动态滚动如果我将使用一个类没问题但动态类有问题答案

【问题标题】：make dyanmic scroll using "scrollIntoView" if I will using one class no problem but the problem with the dynamic class使用“scrollIntoView”进行动态滚动如果我将使用一个类没问题但动态类有问题
【发布时间】：2023-01-18 17:25:52
【问题描述】：

// html

<div class="nav-bullets">
      <div class="bullet">
        <div class="tooltip" data-i=".about-us">About Us</div>
      </div>
      <div class="bullet">
        <div class="tooltip" data-i=".skills">Our Skills</div>
      </div>
      <div class="bullet">
        <div class="tooltip" data-i=".gallery">Our Gallery</div>
      </div>
      <div class="bullet">
        <div class="tooltip" data-i=".timeline">TimeLine</div>
      </div>
    </div>

// javascript

使用一类没问题这样

// Select All Bullets
const allBullets = document.querySelectorAll(".nav-bullets .bullet");

allBullets.forEach(bullet => {
bullet.addEventListener("click" , (e) => {
    document.querySelector(".about-us").scrollIntoView({
      behavior: 'smooth'
    });
 
});
});

// the problem

// Uncaught TypeError: Cannot read properties of null (reading 'scrollIntoView')     at HTMLDivElement.<anonymous>

// but if i will make the class dynamic not working like this

 allBullets.forEach(bullet => { bullet.addEventListener("click" , (e) => {     document.querySelector(e.target.dataset.i).scrollIntoView({       behavior: 'smooth'     });   }); });

【问题讨论】：

标签： javascript scroll js-scrollintoview

【解决方案1】：

您将事件侦听器附加到 .bullet 元素，但它没有 data-i 属性，您已将其添加到子元素 .tooltip：

<div class="bullet"> <-- event listener is here
  <div class="tooltip" data-i=".about-us"> <-- data attribute is here
    About Us
  </div>
</div>

这就是为什么 e.target.dataset.i 未定义并且 document.querySelector(undefined) 不匹配任何元素的原因。

将数据属性移动到.bullet。

【讨论】：