javascript - 如何将自定义滚动条应用到整个页面？

Question

我想包括Jquery custom content scroller到我的页面以替换主滚动条。但由于某种原因我无法让它工作。

这是我的 Codepen .

它适用于一些较小的内容 block ，但如何将插件应用到主滚动？

HTML

<canvas id="canvas"></canvas>

JS

(function($) {
  $(window).load(function() {
  $("canvas").mCustomScrollbar();
  });
})(jQuery);

Answer 1

您可以使用 Nicescroll 插件来实现此目的。将其添加到 html 元素上:$("html").niceScroll();

更多详细信息请参见:http://areaaperta.com/nicescroll/

请尝试:

(function($) {
  $(window).load(function() {
  $("html").niceScroll();
  });
})(jQuery);

var timeOut;
window.onresize = function() {
  if (timeOut)
    clearTimeout(timeOut);
  timeOut = setTimeout(draw, 10);
}

window.onload = draw;
window.onscroll = navigate;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

forest = new Image;
forest.src = 'http://p1.pichost.me/i/33/1561150.jpg';

function navigate() {
  draw()
}

function draw(scroll) {
  scroll = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight) * 3000;
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);

  drawImageProp(ctx, forest, 0, (-scroll * 3.9) / 4, canvas.width, canvas.height + (scroll * 3.9) / 2);
}

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

  if (arguments.length === 2) {
    x = y = 0;
    w = ctx.canvas.width;
    h = ctx.canvas.height;
  }

  // default offset is center
  offsetX = typeof offsetX === "number" ? offsetX : 0.5;
  offsetY = typeof offsetY === "number" ? offsetY : 0.5;

  // keep bounds [0.0, 1.0]
  if (offsetX < 0) offsetX = 0;
  if (offsetY < 0) offsetY = 0;
  if (offsetX > 1) offsetX = 1;
  if (offsetY > 1) offsetY = 1;

  var iw = img.width,
    ih = img.height,
    r = Math.min(w / iw, h / ih),
    nw = iw * r, // new prop. width
    nh = ih * r, // new prop. height
    cx, cy, cw, ch, ar = 1;

  // decide which gap to fill
  if (nw < w) ar = w / nw;
  if (nh < h) ar = h / nh;
  nw *= ar;
  nh *= ar;

  // calc source rectangle
  cw = iw / (nw / w);
  ch = ih / (nh / h);

  cx = (iw - cw) * offsetX;
  cy = (ih - ch) * offsetY;

  // make sure source rectangle is valid
  if (cx < 0) cx = 0;
  if (cy < 0) cy = 0;
  if (cw > iw) cw = iw;
  if (ch > ih) ch = ih;

  // fill image in dest. rectangle
  ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);

}

body {
  height: 1000vh;
  margin: 0;
} 

canvas {
  width: 100%;
  height: 100vh;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="view-source:http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<canvas id="canvas"></canvas>