使用javaScript 滑动到指定区域并保留空间

使用javaScript 滑动到指定区域并保留空间

最近在工作中需要使用到点击按钮滑动到指定区域的功能，原本觉得是很简单的一个功能，不过PM 有个需求是滑动之后要保留点空间

一开始的我想，在区块加点margin / padding 应该就解决了吧？

实作后才发现根本行不通…

意外发现许多新知识，整理成笔记，更新一下荒废已久的blog

先上gif 档说明一下原本的问题：

下方gif 中显示点击了按钮后，确实滑到了指定区域，但可以发现区块紧紧黏着视窗上方

下图是我一开始的写法，直接在目标区域的element 呼叫 滚动查看 方法

scrollIntoView 寫法

后来想说既然 滚动查看 无法符合需求，那应该只能用window.scrollTo了，先找出targetArea 相对于视窗上方的位置，再取得目前使用者滚轴滑到哪个位置，两个相加后，再扣除想要预留的空间(30)，即可达成目的。

这边"取得目前使用者滚轴滑到哪个位置" ，因为各浏览器支援度不同，所以有另外写了一个function 去判断要用何种方式取得值

虽然说目的达到了，但写了落落长的code，觉得有点不舒服阿

后来因缘际会下，看到了一个方便的css 属性— scroll-margin-top，这样一来，就可以用一开始的scrollIntoView 写法，搭配scroll-margin-top 去调整想要空出的空间，打完收工!

不过很遗憾的是，scroll-margin-top 不支援IE，如果有要考虑IE 的话…还是乖乖用第二种方法吧，或是广大的网友们有更好的写法也可以丢上来一起讨论

参考：

[

“滚动边距顶部” |我可以使用... HTML5、CSS3 等的支持表

“我可以使用”提供最新的浏览器支持表，以支持桌面和移动端的前端 Web 技术……

caniuse.com

](https://caniuse.com/?search=scroll-margin-top)

[

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

如果正在使用相对滚动函数，如 window.scrollBy 、window.scrollByLines 或 window.scrollByPages ，则需要使用该属性来检测文档是否已被滚动了某段距离。 pageYOffset 属性是…

developer.mozilla.org

](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY#备注)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11746/31460315