# 代码收集

<template>
  <div>
    <h1 @click="os">OS:{{osStr}}</h1>
    <div id="btn-wrapper">
      <div>
        移动平台
      </div>
      <div>
        <button id="enable"
          @click=enableF>enable
          scrolling</button>
      </div>
      <div>
        <button id="disable"
          @click=disableF>disable
          scrolling</button>
      </div>
      <div>
        <strong id="status"
          :class="statusClassName">{{enabled}}</strong>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      top: '',
      osStr: '',
      enabled: 'enabled',
      statusClassName: 'enabled',
    };
  },
  methods: {
    enableF() {
      this.statusClassName = 'enabled';
      this.enabled = 'enabled';
      document.body.style.position = 'static';
      window.scrollTo(0, this.top);
    },
    disableF() {
      this.top = window.scrollY;
      this.statusClassName = 'disabled';
      this.enabled = 'disabled';
      // document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.top = -this.top + 'px';
    },
  },
};
</script>
<style scoped>
.article {
}
/*btn*/
#btn-wrapper {
  position: fixed;
  z-index: 100;
  bottom: 40%;
  right: 10%;
  border: 1px solid;
  padding: 5px;
  background-color: white;
}
#btn-wrapper > div {
  margin-bottom: 10px;
  text-align: center;
}
.enabled {
  color: green;
}
.disabled {
  color: red;
}
</style>

<template>
  <div>
    <div id="btn-wrapper">
      <div>桌面环境</div>
      <div>
        <button id="enable"
          @click=enableF>enable
          scrolling</button>
      </div>
      <div>
        <button id="disable"
          @click=disableF>disable
          scrolling</button>
      </div>
      <div>
        <strong id="status"
          :class="statusClassName">{{enabled}}</strong>
      </div>
    </div>
    <!-- <div class="article">
      <h3>桨声灯影里的秦淮河</h3>
      <div>作者：朱自清
        文章来源：<a
        target="_blank"
          href="https://www.thn21.com/Article/chang/weiren/mydoc004.htm">会员整理</a></div>
      <p>一九二三年八月的一晚，我和平伯同游秦淮河；平伯是初泛，我是重来了。我们雇了一只七板子，在夕阳已去，皎月方来的时候，便下了船。于是桨声汩--汩，我们开始领略那晃荡着蔷薇色的历史的秦淮河的滋味了。</p>
      <p>秦淮河里的船，比北京万甡园，颐和园的船好，比西湖的船好，比扬州瘦西湖的船也好。这几处的船不是觉着笨，就是觉着简陋、局促；都不能引起乘客们的情韵，如秦淮河的船一样。秦淮河的船约略可分为两种：一是大船；一是小船，就是所谓七板子。大船舱口阔大，可容二三十人。里面陈设着字画和光洁的红木家具，桌上一律嵌着冰凉的大理石面。窗格雕镂颇细，使人起柔腻之感。窗格里映着红色蓝色的玻璃；玻璃上有精致的花纹，也颇悦人目。七板子规模虽不及大船，但那淡蓝色的栏干，空敞的舱，也足系人情思。而最出色处却在它的舱前。舱前是甲板上的一部。上面有弧形的顶，两边用疏疏的栏干支着。里面通常放着两张藤的躺椅。躺下，可以谈天，可以望远，可以顾盼两岸的河房。大船上也有这个，便在小船上更觉清隽罢了。舱前的顶下，一律悬着灯彩；灯的多少，明暗，彩苏的精粗，艳晦，是不一的。但好歹总还你一个灯彩。这灯彩实在是最能钩人的东西。夜幕垂垂地下来时，大小船上都点起灯火。从两重玻璃里映出那辐射着的黄黄的散光，反晕出一片朦胧的烟霭；透过这烟霭，在黯黯的水波里，又逗起缕缕的明漪。在这薄霭和微漪里，听着那悠然的间歇的桨声，谁能不被引入他的美梦去呢？只愁梦太多了，这些大小船儿如何载得起呀？我们这时模模糊糊的谈着明末的秦淮河的艳迹，如《桃花扇》及《板桥杂记》里所载的。我们真神往了。我们仿佛亲见那时华灯映水，画舫凌波的光景了。于是我们的船便成了历史的重载了。我们终于恍然秦淮河的船所以雅丽过于他处，而又有奇异的吸引力的，实在是许多历史的影象使然了。</p>
      <p>秦淮河的水是碧阴阴的；看起来厚而不腻，或者是六朝金粉所凝么？我们初上船的时候，天色还未断黑，那漾漾的柔波是这样的恬静，委婉，使我们一面有水阔天空之想，一面又憧憬着纸醉金迷之境了。等到灯火明时，阴阴的变为沉沉了：黯淡的水光，像梦一般；那偶然闪烁着的光芒，就是梦的眼睛了。我们坐在舱前，因了那隆起的顶棚，仿佛总是昂着首向前走着似的；于是飘飘然如御风而行的我们，看着那些自在的湾泊着的船，船里走马灯般的人物，便像是下界一般，迢迢的远了，又像在雾里看花，尽朦朦胧胧的。这时我们已过了利涉桥，望见东关头了。沿路听见断续的歌声：有从沿河的妓楼飘来的，有从河上船里度来的。我们明知那些歌声，只是些因袭的言词，从生涩的歌喉里机械的发出来的；但它们经了夏夜的微风的吹漾和水波的摇拂，袅娜着到我们耳边的时候，已经不单是她们的歌声，而混着微风和河水的密语了。于是我们不得不被牵惹着，震撼着，相与浮沉于这歌声里了。从东关头转湾，不久就到大中桥。大中桥共有三个桥拱，都很阔大，俨然是三座门儿；使我们觉得我们的船和船里的我们，在桥下过去时，真是太无颜色了。桥砖是深褐色，表明它的历史的长久；但都完好无缺，令人太息于古昔工程的坚美。桥上两旁都是木壁的房子，中间应该有街路？这些房子都破旧了，多年烟熏的迹，遮没了当年的美丽。我想象秦淮河的极盛时，在这样宏阔的桥上，特地盖了房子，必然是髹漆得富富丽丽的；晚间必然是灯火通明的。现在却只剩下一片黑沉沉！但是桥上造着房子，毕竟使我们多少可以想见往日的繁华；这也慰情聊胜无了。过了大中桥，便到了灯月交辉，笙歌彻夜的秦淮河；这才是秦淮河的真面目哩。</p>
      <p>大中桥外，顿然空阔，和桥内两岸排着密密的人家的大异了。一眼望去，疏疏的林，淡淡的月，衬着蓝蔚的天，颇像荒江野渡光景；那边呢，郁丛丛的，阴森森的，又似乎藏着无边的黑暗：令人几乎不信那是繁华的秦淮河了。但是河中眩晕着的灯光，纵横着的画舫，悠扬着的笛韵，夹着那吱吱的胡琴声，终于使我们认识绿如茵陈酒的秦淮水了。此地天裸露着的多些，故觉夜来的独迟些；从清清的水影里，我们感到的只是薄薄的夜--这正是秦淮河的夜。大中桥外，本来还有一座复成桥，是船夫口中的我们的游踪尽处，或也是秦淮河繁华的尽处了。我的脚曾踏过复成桥的脊，在十三四岁的时候。但是两次游秦淮河，却都不曾见着复成桥的面；明知总在前途的，却常觉得有些虚无缥缈似的。我想，不见倒也好。这时正是盛夏。我们下船后，借着新生的晚凉和河上的微风，暑气已渐渐销散；到了此地，豁然开朗，身子顿然轻了--习习的清风荏苒在面上，手上，衣上，这便又感到了一缕新凉了。南京的日光，大概没有杭州猛烈；西湖的夏夜老是热蓬蓬的，水像沸着一般，秦淮河的水却尽是这样冷冷地绿着。任你人影的憧憧，歌声的扰扰，总像隔着一层薄薄的绿纱面幂似的；它尽是这样静静的，冷冷的绿着。我们出了大中桥，走不上半里路，船夫便将船划到一旁，停了桨由它宕着。他以为那里正是繁华的极点，再过去就是荒凉了；所以让我们多多赏鉴一会儿。他自己却静静的蹲着。他是看惯这光景的了，大约只是一个无可无不可。这无可无不可，无论是升的沉的，总之，都比我们高了。</p>
      <p>那时河里闹热极了；船大半泊着，小半在水上穿梭似的来往。停泊着的都在近市的那一边，我们的船自然也夹在其中。因为这边略略的挤，便觉得那边十分的疏了。在每一只船从那边过去时，我们能画出它的轻轻的影和曲曲的波，在我们的心上；这显着是空，且显着是静了。那时处处都是歌声和凄厉的胡琴声，圆润的喉咙，确乎是很少的。但那生涩的，尖脆的调子能使人有少年的，粗率不拘的感觉，也正可快我们的意。况且多少隔开些儿听着，因为想象与渴慕的做美，总觉更有滋味；而竞发的喧嚣，抑扬的不齐，远近的杂沓，和乐器的嘈嘈切切，合成另一意味的谐音，也使我们无所适从，如随着大风而走。这实在因为我们的心枯涩久了，变为脆弱；故偶然润泽一下，便疯狂似的不能自主了。但秦淮河确也腻人。即如船里的人面，无论是和我们一堆儿泊着的，无论是从我们眼前过去的，总是模模糊糊的，甚至渺渺茫茫的；任你张圆了眼睛，揩净了眦垢，也是枉然。这真够人想呢。在我们停泊的地方，灯光原是纷然的；不过这些灯光都是黄而有晕的。黄已经不能明了，再加上了晕，便更不成了。灯愈多，晕就愈甚；在繁星般的黄的交错里，秦淮河仿佛笼上了一团光雾。光芒与雾气腾腾的晕着，什么都只剩了轮廓了；所以人面的详细的曲线，便消失于我们的眼底了。但灯光究竟夺不了那边的月色；灯光是浑的，月色是清的，在浑沌的灯光里，渗入了一派清辉，却真是奇迹！那晚月儿已瘦削了两三分。她晚妆才罢，盈盈的上了柳梢头。天是蓝得可爱，仿佛一汪水似的；月儿便更出落得精神了。岸上原有三株两株的垂杨树，淡淡的影子，在水里摇曳着。它们那柔细的枝条浴着月光，就像一支支美人的臂膊，交互的缠着，挽着；又像是月儿披着的发。而月儿偶然也从它们的交叉处偷偷窥看我们，大有小姑娘怕羞的样子。岸上另有几株不知名的老树，光光的立着；在月光里照起来。却又俨然是精神矍铄的老人。远处--快到天际线了，才有一两片白云，亮得现出异彩，像美丽的贝壳一般。白云下便是黑黑的一带轮廓；是一条随意画的不规则的曲线。这一段光景，和河中的风味大异了。但灯与月竟能并存着，交融着，使月成了缠绵的月，灯射着渺渺的灵辉；这正是天之所以厚秦淮河，也正是天之所以厚我们了。</p>
      <p>这时却遇着了难解的纠纷。秦淮河上原有一种歌妓，是以歌为业的。从前都在茶舫上，唱些大曲之类。每日午后一时起；什么时候止，却忘记了。晚上照样也有一回。也在黄晕的灯光里。我从前过南京时，曾随着朋友去听过两次。因为茶舫里的人脸太多了，觉得不大适意，终于听不出所以然。前年听说歌妓被取缔了，不知怎的，颇涉想了几次--却想不出什么。这次到南京，先到茶舫上去看看，觉得颇是寂寥，令我无端的怅怅了。不料她们却仍在秦淮河里挣扎着，不料她们竟会纠缠到我们，我于是很张皇了。她们也乘着七板子，她们总是坐在舱前的。舱前点着石油汽灯，光亮眩人眼目：坐在下面的，自然是纤毫毕见了--引诱客人们的力量，也便在此了。舱里躲着乐工等人，映着汽灯的余辉蠕动着；他们是永远不被注意的。每船的歌妓大约都是二人；天色一黑。她们的船就在大中桥外往来不息的兜生意。无论行着的船，泊着的船，都要来兜揽的。这都是我后来推想出来的。那晚不知怎样，忽然轮着我们的船了。我们的船好好的停着，一只歌舫划向我们来的；渐渐和我们的船并着了。铄铄的灯光逼得我们皱起了眉头；我们的风尘色全给它托出来了，这使我踧踖不安了。那时一个伙计跨过船来，拿着摊开的歌折，就近塞向我的手里，说，点几出吧！他跨过来的时候，我们船上似乎有许多眼光跟着。同时相近的别的船上也似乎有许多眼睛炯炯的向我们船上看着。我真窘了！我也装出大方的样子，向歌妓们瞥了一眼，但究竟是不成的！我勉强将那歌折翻了一翻，却不曾看清了几个字；便赶紧递还那伙计，一面不好意思地说，不要，我们......不要。他便塞给平伯。平伯掉转头去，摇手说，不要！那人还腻着不走。平伯又回过脸来，摇着头道，不要！于是那人重到我处。我窘着再拒绝了他。他这才有所不屑似的走了。我的心立刻放下，如释了重负一般。我们就开始自白了。</p>
      <p>我说我受了道德律的压迫，拒绝了她们；心里似乎很抱歉的。这所谓抱歉，一面对于她们，一面对于我自己。她们于我们虽然没有很奢的希望；但总有些希望的。我们拒绝了她们，无论理由如何充足，却使她们的希望受了伤；这总有几分不做美了。这是我觉得很怅怅的。至于我自己，更有一种不足之感。我这时被四面的歌声诱惑了，降服了；但是远远的，远远的歌声总仿佛隔着重衣搔痒似的，越搔越搔不着痒处。我于是憧憬着贴耳的妙音了。在歌舫划来时，我的憧憬，变为盼望；我固执的盼望着，有如饥渴。虽然从浅薄的经验里，也能够推知，那贴耳的歌声，将剥去了一切的美妙；但一个平常的人像我的，谁愿凭了理性之力去丑化未来呢？我宁愿自己骗着了。不过我的社会感性是很敏锐的；我的思力能拆穿道德律的西洋镜，而我的感情却终于被它压服着，我于是有所顾忌了，尤其是在众目昭彰的时候。道德律的力，本来是民众赋予的；在民众的面前，自然更显出它的威严了。我这时一面盼望，一面却感到了两重的禁制：一，在通俗的意义上，接近妓者总算一种不正当的行为；二，妓是一种不健全的职业，我们对于她们，应有哀矜勿喜之心，不应赏玩的去听她们的歌。在众目睽睽之下，这两种思想在我心里最为旺盛。她们暂时压倒了我的听歌的盼望，这便成就了我的灰色的拒绝。那时的心实在异常状态中，觉得颇是昏乱。歌舫去了，暂时宁靖之后，我的思绪又如潮涌了。两个相反的意思在我心头往复：卖歌和卖淫不同，听歌和狎妓不同，又干道德甚事？--但是，但是，她们既被逼的以歌为业，她们的歌必无艺术味的；况她们的身世，我们究竟该同情的。所以拒绝倒也是正办。但这些意思终于不曾撇开我的听歌的盼望。它力量异常坚强；它总想将别的思绪踏在脚下。从这重重的争斗里，我感到了浓厚的不足之感。这不足之感使我的心盘旋不安，起坐都不安宁了。唉！我承认我是一个自私的人！平伯呢，却与我不同。他引周启明先生的诗，因为我有妻子，所以我爱一切的女人，因为我有子女，所以我爱一切的孩子。①</p>
      <p>①原诗是，我为了自己的儿女才爱小孩子，为了自己的妻才爱女人，见《雪朝》第４８页。他的意思可以见了。</p>
      <p>他因为推及的同情，爱着那些歌妓，并且尊重着她们，所以拒绝了她们。在这种情形下，他自然以为听歌是对于她们的一种侮辱。但他也是想听歌的，虽然不和我一样，所以在他的心中，当然也有一番小小的争斗；争斗的结果，是同情胜了。至于道德律，在他是没有什么的；因为他很有蔑视一切的倾向，民众的力量在他是不大觉着的。这时他的心意的活动比较简单，又比较松弱，故事后还怡然自若；我却不能了。这里平伯又比我高了。</p>
      <p>在我们谈话中间，又来了两只歌舫。伙计照前一样的请我们点戏，我们照前一样的拒绝了。我受了三次窘，心里的不安更甚了。清艳的夜景也为之减色。船夫大约因为要赶第二趟生意，催着我们回去；我们无可无不可的答应了。我们渐渐和那些晕黄的灯光远了，只有些月色冷清清的随着我们的归舟。我们的船竟没个伴儿，秦淮河的夜正长哩！到大中桥近处，才遇着一只来船。这是一只载妓的板船，黑漆漆的没有一点光。船头上坐着一个妓女；暗里看出，白地小花的衫子，黑的下衣。她手里拉着胡琴，口里唱着青衫的调子。她唱得响亮而圆转；当她的船箭一般驶过去时，余音还袅袅的在我们耳际，使我们倾听而向往。想不到在弩末的游踪里，还能领略到这样的清歌！这时船过大中桥了，森森的水影，如黑暗张着巨口，要将我们的船吞了下去，我们回顾那渺渺的黄光，不胜依恋之情；我们感到了寂寞了！这一段地方夜色甚浓，又有两头的灯火招邀着；桥外的灯火不用说了，过了桥另有东关头疏疏的灯火。我们忽然仰头看见依人的素月，不觉深悔归来之早了！走过东关头，有一两只大船湾泊着，又有几只船向我们来着。嚣嚣的一阵歌声人语，仿佛笑我们无伴的孤舟哩。东关头转湾，河上的夜色更浓了；临水的妓楼上，时时从帘缝里射出一线一线的灯光；仿佛黑暗从酣睡里眨了一眨眼。我们默然的对着，静听那汩--汩的桨声，几乎要入睡了；朦胧里却温寻着适才的繁华的余味。我那不安的心在静里愈显活跃了！这时我们都有了不足之感，而我的更其浓厚。我们却只不愿回去，于是只能由懊悔而怅惘了。船里便满载着怅惘了。直到利涉桥下，微微嘈杂的人声，才使我豁然一惊；那光景却又不同。右岸的河房里，都大开了窗户，里面亮着晃晃的电灯，电灯的光射到水上，蜿蜒曲折，闪闪不息，正如跳舞着的仙女的臂膊。我们的船已在她的臂膊里了；如睡在摇篮里一样，倦了的我们便又入梦了。那电灯下的人物，只觉像蚂蚁一般，更不去萦念。这是最后的梦；可惜是最短的梦！黑暗重复落在我们面前，我们看见傍岸的空船上一星两星的，枯燥无力又摇摇不定的灯光。我们的梦醒了，我们知道就要上岸了；我们心里充满了幻灭的情思。</p>
      <p>１９２３年１０月１１日作完，于温州。<p>（原载１９２４年１月２５日《东方杂志》第２１卷第２号２０周年纪念号）</p>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      top: '',
      enabled: 'enabled',
      statusClassName: 'enabled',
    };
  },
  methods: {
    enableF() {
      this.statusClassName = 'enabled';
      this.enabled = 'enabled';
      //
      if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', this.wheel, false);
      }
      window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    },
    disableF() {
      this.top = window.scrollY;
      this.statusClassName = 'disabled';
      this.enabled = 'disabled';
      //
      if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', this.wheel, false);
      }
      window.onmousewheel = document.onmousewheel = this.wheel;
      document.onkeydown = this.keydown;
    },
    wheel(e) {
      this.preventDefault(e);
    },
    // 阻止冒泡事件传递
    preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;
    },
    // 阻止键盘移动网页
    keydown(e) {
      for (var i = this.keys.length; i--; ) {
        if (e.keyCode === this.keys[i]) {
          this.preventDefault(e);
          return;
        }
      }
    },
  },
};
</script>

<style scoped>
.article p {
  text-indent: 2em;
}
/*btn*/
#btn-wrapper {
  position: fixed;
  z-index: 100;
  bottom: 10%;
  right: 10%;
  background-color: white;
  border: 1px solid;
  padding: 5px;
}
#btn-wrapper > div {
  margin-bottom: 10px;
  text-align: center;
}
.enabled {
  color: green;
}
.disabled {
  color: red;
}
</style>