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

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

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

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

使用变量 currentColor 减少重复代码

需求描述

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

尝试方案

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

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

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

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

前言

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

解决方案

• 方案一

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

先看实现效果

接下来的任务是完成下面页面制作：

第一步

和上一次一样，建立一个空白文档，并输入基础代码，这里不再赘述。

修改标题为“旅游新闻”

在上方效果图可以看到“俄媒盘点三大性价较高的度假胜地

出自程序员之手的 JavaScript 代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进 JavaScript 引擎内部，一探究竟。

作者 | Lydia Hallie

译者 | 弯月，责编 | 屠敏

以下为译文：

JavaScript 很酷（这一点不用我说），但一台机器究竟是怎样理解我们编写的代码呢？作为JavaScript 开发者，我们通常不需要处理编译器的东西。但是，了解 JavaScript 引擎的基础知识，知道它如何将人类能看懂的JS代码变成机器能理解的东西，是绝对是有好处的！