要实现文字查询并自动滚动到匹配到的文本范围

<!DOCTYPE html>
<html>
    <head>
        <title>Text Search and Scroll</title>
    </head>
    <body>
        <input type="text" id="search-input" placeholder="Enter search term">
        <button id="search-button">Search</button>

        <div id="scroll-container" style="overflow: auto; height: 100px;">
            <div class="text-item">Text 1</div>
            <div class="text-item">Text 2</div>
            <div class="text-item">Text 3</div>
            <div class="text-item">Text 4</div>
            <div class="text-item">Text 5</div>
            <div class="text-item">Text 6</div>
            <div class="text-item">Text 7</div>
            <div class="text-item">Text 8</div>
            <div class="text-item">Text 9</div>
            <div class="text-item">Text 10</div>
            <!-- ... and so on -->
        </div>

        <script>
            const searchButton = document.getElementById('search-button');
            const scrollContainer = document.getElementById('scroll-container');

            searchButton.addEventListener('click', () => {
                const searchTerm = document.getElementById('search-input').value;
                const elements = scrollContainer.getElementsByClassName('text-item');

                for (let i = 0; i < elements.length; i++) {
                    const element = elements[i];
                    if (element.textContent.includes(searchTerm)) {
                        element.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        break;
                    }
                }
            });
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容