scrollIntoView和getSelection【记录下最近用到的api】

国王不在家

已于 2023-06-14 09:37:25 修改

阅读量84

点赞数 1

分类专栏： javaScript用例文章标签： css html javascript

于 2023-05-25 16:48:12 首次发布

本文链接：https://blog.csdn.net/badbaby52906/article/details/130868516

版权

javaScript用例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript的scrollIntoView方法在DOM元素中实现平滑滚动，以及利用window.getSelection()处理可编辑内容的选区。示例代码展示了如何滚动到特定元素以及删除选中文本的操作。

摘要由CSDN通过智能技术生成

element.scrollIntoView()//每一项

在可滚动的容器中滚动一个dom确保用户能看到。

代码示例：

        <!--css:-->
    
    	<style>
			div>div {
				height: 100px;
				border: 1px solid red;
				width: 100px;
			}
		</style>

        <!--html:-->
		<div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div id="view"></div>
		</div>

       <!--js:-->
		<script>
			let view = document.querySelector("#view")
			setTimeout(()=>{
				view.scrollIntoView({behavior: "smooth", block: "start"});
			})
		</script>

Element.scrollIntoView() - Web API 接口参考 | MDN

提示：尽量给这个方法传对象

父容器.scrollTo

父容器上也有个方法能实现滚动到指定位置：

父容器dom.scrollTo({ top: 1000, behavior: "smooth" });

setTimeout(() => {
	container.scrollTo(0, 100)//container是父容器
},2000)

//window.scrollTo( 0, 1000 );

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

Window.scrollTo() - Web API 接口参考 | MDN

window.getSelection()

表单dom（HTMLInputElement）上有个selectionStart能操作选中文本，但是对于可编辑（contenteditable）的一般dom拿不到这个属性，所以需要借助window上的getSelection()方法。

        <!--html-->
		<div>0123456789</div>

        <!--js-->
		<script>
	        setTimeout(() => {
				let selec = window.getSelection()
				let rangeCount = selec.rangeCount
				if (rangeCount !== 0) { //需要先判断是否有选中否则getRangeAt报错
					let curRangeO = selec.getRangeAt(0) //获取第一个具体的range对象
					console.log(curRangeO.startOffset, curRangeO.endOffset);	//选中起始和结束点对于父文本的偏移，
					console.log(curRangeO.startContainer, curRangeO.endContainer);
					console.log(curRangeO.toString());	//打印选中的文本
				}
			}, 3000)
		</script>

跨节点选择文本时startContainer和endContainer会不一样，注意区分

删除选中文本：deleteFromDocument

	        setTimeout(() => {
				let selec = window.getSelection()
				let rangeCount = selec.rangeCount
				if (rangeCount !== 0) { //需要先判断是否有选中否则getRangeAt报错
					selec.deleteFromDocument()	//删除选中文本
				}
			}, 3000)

getSelection还有很多有关的属性和api，链接如下

JavaScript中对光标和选区的操作 - 掘金

如何用 js 选中一段文本 - 掘金

Window.getSelection - Web API 接口参考 | MDN