ScrollIntoView() 函数在 Chrome 中不起作用，但在其他浏览器中起作用

Question

我正在制作一个网站，并编写了 JavaScript 代码来将元素滚动到视图中，按下按钮的次数越多，滚动到视图中的元素的 ID 就应该越高。它在 Edge 和 Firefox 上工作正常，但在 Chrome 中，它仅在第一次工作，之后它拒绝滚动，即使元素的 ID 不断增加。如果有人能帮助我解决这个问题，我将不胜感激。

这是JS代码：

document.addEventListener("DOMContentLoaded", function () {
    const scroll_button = document.getElementById("scroll_button");
    var scrollnum = 4

    function scrollFunction() {
        console.log(scrollnum)
        const product = document.getElementById(scrollnum);
        // Scroll the element into view, with smooth behavior
        product.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });
        scrollnum += 2
    }
    if (scroll_button) {
        scroll_button.addEventListener("click", scrollFunction);
    }
})

这是 HTML 代码的一部分：

<div class="col product_row">
<!-- <div class="product_row"> -->
<div class="col-md-4 mb-2" id="1">
    <div class="card">
        <img src="./admin_area/product_images/apple.webp" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Apple</h5>
            <p class="card-text">tasty</p>
            <a href="index.php?add_to_cart=4" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=4" class="btn btn-secondary">View more</a>
            // <a href="#4" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="2">
    <div class="card">
        <img src="./admin_area/product_images/AZZAM yacht.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">AZZAM</h5>
            <p class="card-text">big yacht</p>
            <a href="index.php?add_to_cart=5" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=5" class="btn btn-secondary">View more</a>
            // <a href="#5" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="3">
    <div class="card">
        <img src="./admin_area/product_images/Bugatti La Voiture Noire.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Bugatti La Voiture Noire</h5>
            <p class="card-text">nice car</p>
            <a href="index.php?add_to_cart=2" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=2" class="btn btn-secondary">View more</a>
            // <a href="#6" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<button id="scroll_button">Scroll</button>

我将 console.log(scrollnum) 放入我的代码中以查看scrollnum是否正在更新。它确实在我测试的所有网络浏览器中都在更新。我尝试放置一个 setTimeout() 函数，以便它在滚动之前等待，但这没有任何效果，实际上甚至不起作用。

Answer 1

只是想让您知道，ID 或类都不应以数字开头。

无论如何，尝试记录product而不是scrollnum，以确保您尝试滚动到的元素实际上正在更新。