{"id":1695,"date":"2017-03-24T14:46:15","date_gmt":"2017-03-24T06:46:15","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1695"},"modified":"2017-03-24T14:46:15","modified_gmt":"2017-03-24T06:46:15","slug":"%e7%a7%bb%e5%8a%a8%e7%ab%af-%e6%bb%9a%e5%8a%a8%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1695","title":{"rendered":"\u79fb\u52a8\u7aef \u6eda\u52a8\u63d2\u4ef6"},"content":{"rendered":"<p>\u505a\u4e86\u4e00\u4e2a\u4eff\u7167pc\u7aef\u6eda\u52a8\u6761\u7684\u529f\u80fd\uff0c\u7528\u6765\u89e3\u51b3\u79fb\u52a8\u7aefios\u4e0b scroll\u5361\u987f\u7684bug\u3002<br \/>\n\u76ee\u524d\u7684\u53c2\u6570\u914d\u7f6e\u53ea\u6709id\uff0c\u8003\u8651\u5c06\u9ad8\u5ea6\u3001\u662f\u5426\u663e\u793a\u9690\u85cf\u6ed1\u5757\u3001\u6837\u5f0f\u8bbe\u7f6e\u52a0\u8fdb\u53bb\uff0c\u5e76\u4e14\u517c\u5bb9\u5230pc\u4e2d\u53bb\u3002<\/p>\n<p>\u76ee\u524d\u53ea\u652f\u6301touch\u4e8b\u4ef6\uff0c\u53ef\u6253\u5f00chrome\u7684\u79fb\u52a8\u7aef\u6a21\u5f0f\uff0c\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;\u79fb\u52a8\u7aef\u6eda\u52a8\u6761\u6d4b\u8bd5&lt;\/title&gt;\r\n  &lt;style&gt;\r\n  .z-scroll{\r\n  width: 250px;\r\n  height: 400px;\r\n  padding: 10px;\r\n  background-color: #f0865c;\r\n  border-radius: 5px;\r\n}\r\n.z-scroll .z-scroll-box{\r\n  background-color: #f2f7f9;\r\n  border-radius: 5px;\r\n  height: 100%;\r\n  margin-right: 25px;\r\n  overflow: hidden;\r\n}\r\n.z-scroll .z-scroll-shank{\r\n  float: right;\r\n  width: 20px;\r\n  height: 100%;\r\n  text-align: center;\r\n}\r\n.z-scroll .z-scroll-shank:before{\r\n  display: inline-block;\r\n  content: '';\r\n  height: 100%;\r\n  width: 5px;\r\n  background-color: #6f2305;\r\n}\r\n.z-scroll .z-scroll-block{\r\n  display: inline-block;\r\n  width: 20px;\r\n  height: 40px;\r\n  border-radius: 4px;\r\n  background-color: #f7f979;\r\n  transform:translateY(-100px);\r\n  cursor:pointer;\r\n}\r\n  .m-doc{\r\n    padding: 10px;\r\n  }\r\n  .m-doc img{\r\n    width: 100%;\r\n    height: auto;\r\n  }\r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div&gt;\r\n    &lt;h1&gt;\u6211\u662f\u6eda\u52a8\u7684\u63d2\u4ef6\u3002&lt;\/h1&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"z-scroll\" id=\"scroll\"&gt;\r\n    &lt;div class=\"z-scroll-shank\"&gt;\r\n      &lt;span class=\"z-scroll-block\"&gt;&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"z-scroll-box\"&gt;\r\n      &lt;div class=\"z-scroll-content\"&gt;\r\n        &lt;div class=\"m-doc\"&gt;\r\n          &lt;p&gt;\u4e16\u4eba\u90fd\u7231\u7f8e\u5973\uff0c\u4f46\u5bf9\u7f8e\u7684\u6001\u5ea6\u5374\u6a21\u68f1\u4e24\u53ef\u3002\u6b23\u8d4f\u8273\u7fa1\u7684\u540c\u65f6\uff0c\u53c8\u4e0d\u514d\u5728\u5185\u5fc3\u5600\u5495\u4e00\u53e5\uff1a\u751f\u5f97\u4e00\u526f\u597d\u76ae\u56ca\uff0c\u771f\u662f\u72ec\u5f97\u4e0a\u5929\u539a\u7231\uff0c\u96be\u602a\u4e00\u751f\u987a\u98ce\u987a\u6c34\u82b1\u56e2\u9526\u7c07\u5462\u3002\u8bf4\u5230\u7f8e\u5973\uff0c\u5c24\u5176\u662f\u6c11\u56fd\u7f8e\u5973\uff0c\u6797\u5fbd\u56e0\u4fbf\u662f\u5176\u4e2d\u540d\u58f0\u6700\u5927\u7684\u4e86\uff0c\u53ea\u662f\u6709\u4eba\u5949\u5979\u4e3a\u5973\u795e\uff0c\u6709\u4eba\u89c9\u5f97\u5979\u4e5f\u4e0d\u8fc7\u662f\u4e2a\u201c\u7eff\u8336\u5a4a\u201d\u800c\u5df2\uff0c\u633d\u7740\u4e2a\u6881\u601d\u6210\uff0c\u5ff5\u5ff5\u4e0d\u5fd8\u5f90\u5fd7\u6469\uff0c\u751a\u81f3\u8fd8\u8ba9\u4eba\u5bb6\u91d1\u5cb3\u9716\u4e3a\u5979\u7ec8\u8eab\u4e0d\u5ac1\u3002\u8fd9\u4e9b\u8bc4\u8bf4\u91cc\uff0c\u5927\u5bb6\u90fd\u53ea\u5c06\u5979\u89c6\u4e3a\u5973\u4eba\u3001\u957f\u5f97\u6f02\u4eae\u7684\u5973\u4eba\uff0c\u5374\u5ffd\u7565\u4e86\u5979\u6240\u505a\u7684\u4e8b\u60c5\u3002&lt;\/p&gt;\r\n          &lt;p&gt;\u6797\u5fbd\u56e0\u66fe\u8bf4\u8fc7\uff1a\u201c\u771f\u8ba8\u538c\uff0c\u4ec0\u4e48\u7f8e\u4eba\u3001\u7f8e\u4eba\uff0c\u597d\u50cf\u5973\u4eba\u6ca1\u6709\u4ec0\u4e48\u4e8b\u53ef\u505a\u4f3c\u7684\uff0c\u6211\u8fd8\u6709\u597d\u4e9b\u4e8b\u8981\u505a\u5462\uff01\u201d\u5728\u5979\u770b\u6765\uff0c\u4ec5\u4ee5\u201c\u7f8e\u4eba\u201d\u6765\u770b\u5f85\u5979\uff0c\u662f\u5bf9\u5979\u7684\u8f7b\u89c6\u3002&lt;\/p&gt;\r\n          &lt;p&gt;\u4e3a\u4ec0\u4e48\u4eba\u4eba\u89c6\u4e3a\u201c\u798f\u5229\u201d\u7684\u7f8e\u597d\u5bb9\u989c\uff0c\u5728\u6797\u5fbd\u56e0\u8fd9\u91cc\u5374\u6210\u4e86\u82e6\u607c\u5462\uff1f\u56e0\u4e3a\u5bf9\u6797\u5fbd\u56e0\u7684\u751f\u547d\u5386\u7a0b\u6765\u8bf4\uff0c\u59e3\u597d\u7684\u5bb9\u8c8c\u5374\u662f\u5979\u8eab\u4e0a\u6700\u4e0d\u8db3\u79f0\u9053\u7684\u4e1c\u897f\u3002&lt;\/p&gt;\r\n          &lt;strong&gt;\u8bf4\u5230\u4e0d\u5fd8\u521d\u5fc3\uff0c\u6ca1\u6709\u4eba\u6bd4\u5979\u505a\u5f97\u66f4\u597d&lt;\/strong&gt;\r\n          &lt;p&gt;\u4f60\u8fd8\u8bb0\u5f97\u5341\u51e0\u5c81\u65f6\u7684\u68a6\u60f3\u5417\uff1f\u60f3\u5fc5\u6ca1\u6709\u591a\u5c11\u4eba\u80fd\u56de\u7b54\uff1a\u6211\u4e00\u76f4\u5728\u575a\u5b88\u68a6\u60f3\u3002\u4f46\u6797\u5fbd\u56e0\uff0c\u5341\u516d\u5c81\u53d7\u90bb\u5c45\u5973\u5efa\u7b51\u5e08\u5f71\u54cd\uff0c\u7acb\u4e0b\u6295\u8eab\u5efa\u7b51\u4e8b\u4e1a\u7684\u5fd7\u613f\u540e\uff0c\u4e00\u751f\u90fd\u5728\u4e3a\u8fd9\u4e2a\u68a6\u60f3\uff0c\u4e0d\u61c8\u8015\u8018\u3002&lt;\/p&gt;\r\n          &lt;p&gt;\u5f7c\u65f6\uff0c\u6881\u601d\u6210\u5c1a\u672a\u786e\u8ba4\u5fd7\u5411\uff0c\u66fe\u60f3\u5b50\u627f\u7236\u4e1a\u5b66\u4e60\u897f\u65b9\u653f\u6cbb\uff0c\u4f46\u88ab\u6797\u5fbd\u56e0\u5bf9\u5efa\u7b51\u7684\u9ad8\u8c08\u9614\u8bba\u6539\u53d8\u4e86\u4e3b\u610f\u3002\u751a\u81f3\u5728\u8c08\u5a5a\u8bba\u5ac1\u65f6\uff0c\u5979\u4e5f\u4ee5\u5bf9\u65b9\u5fc5\u987b\u4e0e\u81ea\u5df1\u5230\u7f8e\u56fd\u5b66\u4e60\u5efa\u7b51\u4e3a\u6761\u4ef6\uff0c\u5bf9\u6881\u601d\u6210\u7684\u4e00\u751f\u7684\u7acb\u5fd7\u8d77\u4e86\u5173\u952e\u4f5c\u7528\u3002\u5979\u5bf9\u81ea\u6211\u7406\u60f3\u548c\u5b9e\u73b0\u90fd\u6709\u7740\u6e05\u9192\u7684\u8ba4\u8bc6\uff0c\u771f\u8ba9\u5341\u70b9\u541b\u6c57\u989c\u3002&lt;\/p&gt;\r\n          &lt;p&gt;\u4e0d\u8fdc\u4e07\u91cc\u8d74\u7f8e\u56fd\u7559\u5b66\uff0c\u5374\u5f97\u77e5\u5efa\u7b51\u7cfb\u4e0d\u62db\u5973\u751f\u3002\u5979\u4fbf\u201c\u66f2\u7ebf\u6551\u56fd\u201d\uff0c\u5728\u7f8e\u672f\u7cfb\u6ce8\u518c\uff0c\u4f46\u9009\u4fee\u4e86\u5efa\u7b51\u5b66\u7684\u5168\u90e8\u8bfe\u7a0b\u3002\u5979\u5168\u8eab\u5fc3\u6295\u5165\u8bfe\u4e1a\uff0c\u4f18\u5f02\u7684\u6210\u7ee9\u4f7f\u5979\u6210\u4e3a\u8bfe\u7a0b\u52a9\u6559\u3002\u5728\u63a5\u53d7\u7f8e\u56fd\u4e00\u5bb6\u62a5\u7eb8\u7684\u91c7\u8bbf\u65f6\uff0c\u5979\u81ea\u4fe1\u5730\u8bf4\uff1a\u201c\u6211\u8981\u5e26\u56de\u4ec0\u4e48\u662f\u4e2d\u897f\u65b9\u78b0\u649e\u7684\u771f\u6b63\u542b\u4e49\u3002\u201d\u2014\u2014\u5b66\u6210\u5f52\u56fd\uff0c\u5979\u4e0e\u6881\u601d\u6210\u53d7\u8058\u4e8e\u4e1c\u5317\u5927\u5b66\uff0c\u521b\u5efa\u5efa\u7b51\u7cfb\uff0c\u5c06\u7559\u5b66\u65f6\u7684\u7ecf\u9a8c\u7528\u4e8e\u5b66\u6821\u3002\u6797\u5fbd\u56e0\u8fd8\u8bbe\u8ba1\u4e86\u4e1c\u5317\u5927\u5b66\u201c\u767d\u5c71\u9ed1\u6c34\u201d\u7684\u6821\u5fbd\u3002&lt;\/p&gt;\r\n          &lt;img src=\".\/images\/img01.jpg\" alt=\"\"&gt;\r\n          &lt;p&gt;\u6797\u5fbd\u56e0\u65e9\u5e74\u60a3\u80ba\u75be\uff0c\u6297\u6218\u671f\u95f4\u98a0\u6c9b\u6d41\u79bb\uff0c\u75c5\u60c5\u52a0\u5267\u4e3a\u80ba\u7ed3\u6838\u3002\u4f46\u54ea\u6015\u8eab\u60a3\u91cd\u75be\uff08\u80ba\u7ed3\u6838\u5728\u5f53\u65f6\u5c5e\u4e8e\u4e0d\u6cbb\u4e4b\u75c7\uff09\uff0c\u5979\u4f9d\u7136\u4e0e\u6881\u601d\u6210\u4e00\u8def\u9910\u98ce\u9732\u5bbf\u3001\u7ffb\u5c71\u8d8a\u5cad\uff0c\u8d70\u904d\u4e2d\u56fd15\u4e2a\u7701\u3001200\u591a\u4e2a\u53bf\uff0c\u8003\u5bdf\u6d4b\u7ed8\u4e86200\u591a\u5904\u53e4\u5efa\u7b51\u3002\u5c24\u5176\u662f\u9a91\u7740\u6bdb\u9a74\u5bfb\u89c5\u5230\u4f5b\u5149\u5bfa\u65f6\uff0c\u8eab\u4f53\u7fb8\u5f31\u7684\u6797\u5fbd\u56e0\uff0c\u4eb2\u81ea\u722c\u4e0a\u957f\u68af\u6d4b\u91cf\u3002&lt;\/p&gt;\r\n          &lt;strong&gt;\u4e0d\u4ee5\u8bd7\u4eba\u7684\u7f8e\u8a89\u4e3a\u8363\uff0c\u4e5f\u4e0d\u4ee5\u88ab\u4eba\u604b\u7231\u4e3a\u8fb1&lt;\/strong&gt;\r\n          &lt;p&gt;\u5341\u516d\u5c81\u65f6\uff0c\u6797\u5fbd\u56e0\u5728\u82f1\u56fd\u4e0e\u8bd7\u4eba\u5f90\u5fd7\u6469\u76f8\u8bc6\uff0c\u540e\u8005\u5f88\u5feb\u4fbf\u9677\u5165\u4e86\u5979\u6e05\u4eae\u7684\u773c\u7738\u91cc\uff0c\u751a\u81f3\u4e0d\u60dc\u4e3a\u4e86\u5979\u4e0e\u59bb\u5b50\u5f20\u5e7c\u4eea\u79bb\u5a5a\u3002\u5f90\u5fd7\u6469\u5766\u8a00\uff0c\u81ea\u5df1\u662f\u56e0\u4e3a\u6797\u5fbd\u56e0\u624d\u8d70\u4e0a\u4e86\u8bd7\u6b4c\u7684\u9053\u8def\uff0c\u5979\u662f\u843d\u5728\u4ed6\u5fc3\u6e56\u91cc\u7684\u4e00\u6735\u4e91\uff0c\u7518\u613f\u505a\u5979\u88d9\u8fb9\u7684\u4e00\u682a\u8349\uff0c\u54ea\u6015\u53ea\u80fd\u5728\u51dd\u671b\u4e2d\u7231\u7740\u5979\u3002&lt;\/p&gt;\r\n          &lt;p&gt;\u6797\u5fbd\u56e0\u6700\u7ec8\u9009\u62e9\u4e86\u6881\u601d\u6210\u3002\u5979\u6b23\u8d4f\u5f90\u5fd7\u6469\u7684\u6d6a\u6f2b\u4e0e\u98d8\u9038\uff0c\u4f46\u777f\u667a\u5982\u5979\uff0c\u5e76\u4e0d\u4efb\u7531\u611f\u6027\u6765\u5de6\u53f3\u81ea\u5df1\u9009\u62e9\uff0c\u5c31\u8fde\u5f20\u5e7c\u4eea\u90fd\u8bc4\u4ef7\u5979\u201c\u662f\u4e00\u4f4d\u601d\u60f3\u66f4\u590d\u6742\u3001\u957f\u76f8\u66f4\u6f02\u4eae\u3001\u53cc\u811a\u66f4\u81ea\u7531\u7684\u5973\u58eb\u201d\u3002&lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;script&gt;\r\n  \/** [zScroll description]constructor *\/\r\nfunction zScroll(options) {\r\n  this.options = options || {};\r\n  if (this.options.id) {\r\n    this.container = document.getElementById(this.options.id);\r\n    \/\/render ...\r\n    this.swiperPanel = this.container.children[1].children[0];\r\n    this.shank = this.container.children[0];\r\n    this.swiperBlock = this.shank.children[0];\r\n    this.initBlockPosition();\r\n  } else {\r\n    console.log('add the id of element');\r\n  }\r\n};\r\n\/** [initBlockPosition description]\u521d\u59cb\u5316\u6ed1\u5757\u4f4d\u7f6e *\/\r\nzScroll.prototype.initBlockPosition = function() {\r\n  if (this.shank &amp;&amp; this.swiperBlock) {\r\n    var shank_ht = this.shank.offsetHeight;\r\n    this.swiperBlock.style.webkitTransform = 'translateY(-' + shank_ht + 'px)';\r\n    this.swiperPanel.style.webkitTransform = 'translateY(0px)';\r\n    this.moveBlock(shank_ht);\r\n  }\r\n};\r\n\/** [moveBlock description]\u79fb\u52a8\u6ed1\u5757\u4f4d\u7f6e *\/\r\nzScroll.prototype.moveBlock = function(shank_ht) {\r\n  var _this = this;\r\n  this.startY = 0;\r\n  this.y = 0;\r\n  this.startPanelY = 0;\r\n  this.panelY = 0;\r\n  this.aboveY = -shank_ht;\r\n  this.abovePanelY = 0;\r\n  if (_this.container) {\r\n    _this.container.addEventListener('touchstart', function(e) {\r\n      var target = e.target || e.srcElement;\r\n      if (target.className == _this.swiperBlock.className) {\r\n        _this.touchStart.call(_this, e);\r\n      } else if (_this.swiperPanel.contains(target)) {\r\n        _this.touchStartPanel.call(_this, e);\r\n      }\r\n    });\r\n    _this.container.addEventListener('touchmove', function(e) {\r\n      var target = e.target || e.srcElement;\r\n      if (target.className == _this.swiperBlock.className) {\r\n        _this.touchMove.call(_this, e);\r\n      } else if (_this.swiperPanel.contains(target)) {\r\n        _this.touchMovePanel.call(_this, e);\r\n      }\r\n    });\r\n    _this.container.addEventListener('touchend', function(e) {\r\n      var target = e.target || e.srcElement;\r\n      if (target.className == _this.swiperBlock.className) {\r\n        _this.touchEnd.call(_this, e);\r\n      } else if (_this.swiperPanel.contains(target)) {\r\n        _this.touchEndPanel.call(_this, e);\r\n      }\r\n      return true;\r\n    });\r\n  }\r\n};\r\nzScroll.prototype.touchStart = function(e) {\r\n  var touch = e.touches[0];\r\n  this.startY = touch.pageY;\r\n  e.preventDefault();\r\n};\r\nzScroll.prototype.touchMove = function(e) {\r\n  var touch = e.touches[0],\r\n    shank_ht = this.shank.offsetHeight,\r\n    block_ht = this.swiperBlock.offsetHeight;\r\n  this.y = parseInt(this.aboveY + touch.pageY - this.startY);\r\n  if (this.y &lt;= -block_ht &amp;&amp; this.y &gt;= -shank_ht) {\r\n    this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';\r\n    this.moveSwipePanel();\r\n  } else {\r\n    if (this.y &lt; -shank_ht) {\r\n      this.y = -shank_ht;\r\n      this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';\r\n      this.moveSwipePanel();\r\n    } else if (this.y &gt; -block_ht) {\r\n      this.y = -block_ht;\r\n      this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';\r\n      this.moveSwipePanel();\r\n    }\r\n  }\r\n  e.preventDefault();\r\n};\r\nzScroll.prototype.touchEnd = function(e) {\r\n  var cssPanel = this.swiperPanel.style.webkitTransform,\r\n    cssBlock = this.swiperBlock.style.webkitTransform;\r\n  this.aboveY = cssBlock ? parseInt(cssBlock.split('(')[1].split(')')[0].replace('px', '')) : -this.shank.offsetHeight;\r\n  this.abovePanelY = cssPanel ? parseInt(cssPanel.split('(')[1].split(')')[0].replace('px', '')) : 0;\r\n  e.preventDefault();\r\n};\r\n\/** [moveSwipePanel description]\u79fb\u52a8\u5185\u5bb9 *\/\r\nzScroll.prototype.moveSwipePanel = function() {\r\n  var shank_ht = this.shank.offsetHeight;\r\n  var x1 = this.swiperPanel.offsetHeight - shank_ht,\r\n    x2 = shank_ht - this.swiperBlock.offsetHeight;\r\n  if (x2 != 0) {\r\n    var y2 = parseInt(x1 \/ x2 * (this.y + shank_ht));\r\n    this.swiperPanel.style.webkitTransform = 'translateY(' + -y2 + 'px)';\r\n  }\r\n};\r\n\r\n\r\n\/** [touchStartBlock description]\u9762\u677f\u6ed1\u52a8\u4e8b\u4ef6 *\/\r\nzScroll.prototype.touchStartPanel = function(e) {\r\n  var touch = e.touches[0];\r\n  this.startPanelY = touch.pageY;\r\n  e.preventDefault();\r\n};\r\nzScroll.prototype.touchMovePanel = function(e) {\r\n  var touch = e.touches[0],\r\n    shank_ht = this.shank.offsetHeight,\r\n    panel_ht = this.swiperPanel.offsetHeight;\r\n  this.panelY = parseInt(this.abovePanelY + touch.pageY - this.startPanelY);\r\n  if (this.panelY &lt;= 0 &amp;&amp; this.panelY &gt;= -(panel_ht - shank_ht)) {\r\n    this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';\r\n    this.moveSwipeBlock();\r\n  } else {\r\n    if (this.panelY &gt; 0) {\r\n      this.panelY = 0;\r\n      this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';\r\n      this.moveSwipeBlock();\r\n    } else if (this.panelY &lt; -(panel_ht - shank_ht)) {\r\n      this.panelY = -(panel_ht - shank_ht);\r\n      this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';\r\n      this.moveSwipeBlock();\r\n    }\r\n  }\r\n  e.preventDefault();\r\n};\r\nzScroll.prototype.touchEndPanel = function(e) {\r\n  var cssPanel = this.swiperPanel.style.webkitTransform,\r\n    cssBlock = this.swiperBlock.style.webkitTransform;\r\n  this.aboveY = cssBlock ? parseInt(cssBlock.split('(')[1].split(')')[0].replace('px', '')) : -this.shank.offsetHeight;\r\n  this.abovePanelY = cssPanel ? parseInt(cssPanel.split('(')[1].split(')')[0].replace('px', '')) : 0;\r\n  e.preventDefault();\r\n};\r\n\/** [moveSwipePanel description]\u79fb\u52a8\u5185\u5bb9 *\/\r\nzScroll.prototype.moveSwipeBlock = function() {\r\n  var shank_ht = this.shank.offsetHeight;\r\n  var x1 = this.swiperPanel.offsetHeight - shank_ht,\r\n    x2 = shank_ht - this.swiperBlock.offsetHeight;\r\n  if (x1 != 0) {\r\n    var y2 = parseInt(x2 * this.panelY \/ x1 + shank_ht);\r\n    this.swiperBlock.style.webkitTransform = 'translateY(' + -y2 + 'px)';\r\n  }\r\n};\r\n\/\/ ----  \u5176\u4ed6 -------\/\/\r\n\/** [addStyle description]\u6dfb\u52a0\u6837\u5f0f *\/\r\nzScroll.prototype.addStyle = function(el, classStyle) {\r\n  if (typeof classStyle == 'object' &amp;&amp; el) {\r\n    for (var name in classStyle) {\r\n      el.style[name] = classStyle[name];\r\n    }\r\n  }\r\n};\r\n  &lt;\/script&gt;\r\n  &lt;script&gt;\r\n    var scroll=new zScroll({\r\n      id:'scroll'\r\n    });\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p class=\"post-copyright\">\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a<a href=\"http:\/\/www.qdabc.cn\">\u524d\u7aefABC<\/a> &raquo; <a href=\"http:\/\/www.qdabc.cn\/?p=1695\">\u79fb\u52a8\u7aef \u6eda\u52a8\u63d2\u4ef6<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u505a\u4e86\u4e00\u4e2a\u4eff\u7167pc\u7aef\u6eda\u52a8\u6761\u7684\u529f\u80fd\uff0c\u7528\u6765\u89e3\u51b3\u79fb\u52a8\u7aefios\u4e0b scroll\u5361\u987f\u7684bug\u3002 \u76ee\u524d\u7684\u53c2\u6570\u914d\u7f6e\u53ea\u6709id\uff0c\u8003\u8651\u5c06\u9ad8\u5ea6\u3001\u662f\u5426\u663e\u793a\u9690\u85cf\u6ed1\u5757\u3001\u6837\u5f0f\u8bbe\u7f6e\u52a0\u8fdb\u53bb\uff0c\u5e76\u4e14\u517c\u5bb9\u5230pc\u4e2d\u53bb\u3002 \u76ee\u524d\u53ea\u652f\u6301touch\u4e8b\u4ef6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[231,15],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1695"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1695"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1695\/revisions"}],"predecessor-version":[{"id":1696,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1695\/revisions\/1696"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1695"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}