<!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>
要实现文字查询并自动滚动到匹配到的文本范围
2024-09-12
31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
要实现文字查询并自动滚动到匹配到的文本范围
目录
相关文章
|
JavaScript
前端开发
|
JavaScript
前端开发
绚烂的文本换行，打破常规元素背景填充规则
在我们的日常开发中，为一个元素设置背景、边框、阴影、内外边距等，通常是会应用在整个元素上； 例如我为一个元素设置一个背景图，根据背景图的填充规则设定，这个图片可能会出现重复，或者拉伸，或者多余的地方留
101
0
0
|
JavaScript
|
缓存
|
容器
|
人工智能
如何使特定的数据高亮显示?
875
0
0