点击链接滚动到目标div，避免body整体滚动的JavaScript实现问题

需要实现点击link_div内的章节链接时，仅让content_div内部滚动到目标章节，避免整个body跟着滚动。尝试了scrollTo、scrollIntoView等方法，均未达到预期效果。

页面结构 #

<body>
    <div>header/navbar</div>
    <div>hero section</div>
    <div class="container position-relative">
        <div class="row d-flex">
            <div class="col-3 link_div position-sticky">
                <ul>
                    <li><span onclick="showSection('section1')">Section 1</span></li>
                    <li><span onclick="showSection('section2')">Section 2</span></li>
                    <li><span onclick="showSection('section3')">Section 3</span></li>
                    <li><span onclick="showSection('section4')">Section 4</span></li>
                    <li><span onclick="showSection('section5')">Section 5</span></li>
                </ul>
            </div>
            <div class="col-9 content_div">
                <div id="section1" class="height-300"></div>
                <div id="section2" class="height-300"></div>
                <div id="section3" class="height-300"></div>
                <div id="section4" class="height-300"></div>
                <div id="section5" class="height-300"></div>
            </div>
        </div>
    </div>
</body>

之前尝试的JavaScript代码 #

代码一 #

function showSection(sectionId) {
    var targetSection = document.getElementById(sectionId);
    var contentDiv = document.getElementById('content_div');

    if (targetSection && contentDiv) {
        var contentDivRect = contentDiv.getBoundingClientRect();
        var sectionRect = targetSection.getBoundingClientRect();
        var scrollPosition = sectionRect.top - contentDivRect.top + contentDiv.scrollTop;
        window.scrollTo(0, scrollPosition);

    }
}

代码二 #

function showSection(sectionId) {
    var selectedSection = document.getElementById(sectionId);
    if (selectedSection) {
        const scrollOffset = targetElement.offsetTop - scrollableDiv.offsetTop; 
        scrollableDiv.scrollTop = scrollOffset; 
        selectedSection.scrollIntoView({ behavior: 'smooth' });
    }
}

解决方案 #

1. 修正HTML中的参数传递问题 #

原代码中onclick="showSection(section1)"传递的是未定义变量，需改为传递字符串形式的ID：onclick="showSection('section1')"，如上述页面结构示例所示。

2. 为content_div添加CSS，使其成为可滚动容器 #

必须给content_div设置固定高度/最大高度和垂直滚动属性，否则无法成为独立滚动容器：

.content_div {
    /* 根据页面实际布局调整高度，比如减去header和hero的总高度 */
    max-height: calc(100vh - 150px); 
    overflow-y: auto;
    /* 可选：隐藏滚动条，保留滚动功能 */
    /* scrollbar-width: none; */
    /* -ms-overflow-style: none; */
}

/* 可选：隐藏Chrome等浏览器的滚动条 */
.content_div::-webkit-scrollbar {
    display: none;
}

3. 正确的JavaScript实现 #

方法一：通过计算偏移量设置scrollTop

直接操作content_div的scrollTop属性，精准控制滚动位置：

function showSection(sectionId) {
    // 通过class选择器获取content_div（原代码用getElementById找不到，因为是class）
    const contentDiv = document.querySelector('.content_div');
    const targetSection = document.getElementById(sectionId);

    if (contentDiv && targetSection) {
        // 计算目标元素相对于content_div顶部的偏移量
        const scrollOffset = targetSection.offsetTop - contentDiv.offsetTop;
        // 直接滚动到目标位置
        contentDiv.scrollTop = scrollOffset;
        
        // 如果需要平滑滚动，替换为下面的代码：
        // contentDiv.scrollTo({
        //     top: scrollOffset,
        //     behavior: 'smooth'
        // });
    }
}

方法二：使用scrollIntoView（需确保容器可滚动）

利用scrollIntoView方法，指定滚动行为和对齐方式，前提是content_div已设置为可滚动容器：

function showSection(sectionId) {
    const contentDiv = document.querySelector('.content_div');
    const targetSection = document.getElementById(sectionId);

    if (contentDiv && targetSection) {
        targetSection.scrollIntoView({
            behavior: 'smooth', // 平滑滚动
            block: 'start',     // 目标元素顶部与容器顶部对齐
            inline: 'nearest'
        });
    }
}

错误原因分析 #

• 原代码使用window.scrollTo()操作整个窗口滚动，导致body跟着滚动，应改为操作content_div的滚动属性。
• content_div未设置overflow-y: auto和固定高度，无法成为独立滚动容器，滚动事件会冒泡到body。
• 变量名错误（如targetElement、scrollableDiv未定义），以及HTML中参数传递错误（未传递字符串ID），导致代码无法正确执行。

内容的提问来源于stack exchange，提问作者MD Meadul Islam