作为前端开发者，我们每天都在操作 DOM，但 DOM API 中隐藏着许多鲜为人知却极其实用的方法。本文将介绍一些「冷门但能显著提升开发效率」的DOM操作技巧。

1. Element.checkVisibility()

本文教给大家一个通过滚动鼠标查看长篇幅内容的效果，一起来看看~

在输出B端产品的原型文档时，会遇到以下这种情况：需要在固定的页面或弹窗上展示长篇幅的内容，然后通过滚动鼠标来查看。

有一个比较笨的办法是：直接拖入一个内联框架，然后把需要展示的内容存放在另外一个页面，再将内联框架链接到那个页面，但这样有一个不好的展示效果，就是内联框架的滚动条在原型上是可以直接看到的，不够美观。

再有另外一个聪明点的办法就是：用和背景色一致的矩形去遮挡内联框架的滚动条。但凡有强迫症的人，是接受不了那个丑丑的滚动条的。但凡有追求的人，是不会止步于那种取巧的办法的（哈哈，一点都不高级）

使用变量 currentColor 减少重复代码

需求描述

• 移到按钮上时，改变该元素的 border-color 、 color ，还有一个具有透明度的同色背景。
• 点击按钮之后，颜色更改为移入按钮时的同种颜色。

尝试方案

我相信任何一个前端开发者都能很快实现这个需求，不知道大家怎么样的，我在之前一直都是以下代码快速实现：

有时我们有这么一个需求：这个页面非常长，但是当我阅读了一半的时候可能点击了页面中的某一个链接跳转到了一个新的页面查看部分资料，然后再回来。这时我们希望能够从离开的位置继续阅读。下面就让我们来实现一下。

首先，我们需要在页面离开前记录当前页面滚动条的位置：

//记录当前滚动条的位置
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

前言

你是不是还在为丑陋的滚动条样式而烦恼，那挥之不去的滚动条一直在那， 当UI找你的时候，你是不是还在用那是浏览器默认的样式去搪塞他，现在教你三行代码解决它，话不多说，先上代码。

解决方案

• 方案一

如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！

先看实现效果