这诺艾尔的官网，说白了就是我用来“减压”的一个小项目。做大项目老是心累，动不动就被需求方折腾得心力交瘁，上次那个PaaS平台，真是把我搞得差点当场想辞职，心里就一直憋着一股火。
被“意外”逼着开始
我本来是打算研究一下新出的一个微服务架构的。结果刚把环境配家里的电脑就给我闹脾气了，那块用了四五年的机械硬盘，直接给我崩了。各位，硬盘一崩，我的所有代码备份、所有随手记录的笔记，全没了。当时我就瘫在椅子上，感觉这行当真是没法干了，辛辛苦苦的东西，说没就没了。
我老婆倒是比我淡定多了，她看我脸色不直接把我的开发环境给关了，说：“算了，先别搞那些烧脑的了，搞个轻松点的，找回点自信再说。”
我一听也对，干脆找个最让我放松的主题来做。我想来想去，就想到了诺艾尔这个角色，那句“诺艾尔会努力的”直接就蹦我脑子里了。行，那就给她搞个最简单的静态网站，就当是给自己一个喘息的空间。
从零到一的“挣扎”
我决定了，这回不搞什么花里胡哨的后端，就是纯粹的HTML和CSS，把自己之前被遗忘的基础功重新捡起来。
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
-
第一步：环境。我直接在本地开了个最简单的Nginx容器，主机环境都不想碰，就想快点跑起来，看到点东西。把基础的<head>和<body>先架上。
-
第二步：定调。这网站肯定得是女仆风格，主题色调我选了暖黄和棕色，让人感觉温馨又可靠。花了点时间在配色工具上磨，就怕颜色太土。
-
第三步：内容填充。我去找了些壁纸，自己用GIMP把图裁切了一下，准备用来做背景和头图。这一步倒是轻松。
最让人抓狂的细节
本以为一切顺利，结果还是出岔子了。我的想法是，在网站的右下角，得有一个小小的、会跟着页面滚动但又固定在屏幕角落的诺艾尔小图标，当做彩蛋。
我理所当然地用了`position: fixed`这个CSS属性。在电脑上，完美，小图标乖乖地待在右下角，页面怎么滚它都不动。
结果当我切到手机视图模拟器一看，这图标开始抖了！你们懂那种感觉吗？一滚动，它就不停地晃动，简直像得了帕金森一样。一个简单的CSS属性，把我彻底搞崩溃了。为了这个破图标，我愣是熬了两个通宵。
我把所有能找到的跟移动端滚动、定位相关的属性都试了一遍，从`transform`到`will-change`，再到各种浏览器兼容性代码，都没有用。当时的感觉，比我被老东家坑，硬盘崩了，还要让人烦躁。
怎么搞定的？说出来好笑，我发现这根本不是我的代码问题，而是某些旧版本浏览器渲染机制的毛病。我最终放弃了直接的`position: fixed`，换了一个用JavaScript稍微介入，判断滚动事件，然后手动计算位置的笨办法。代码多了几行，但是它终于老实了，不抖了！
现在这个小网站，静静地挂在那里，虽然简陋，但至少那个图标安安静静。我从心烦意乱到最终把这个“移动端的抖动”问题给强行解决了，也算是又一次“努力”了。