Question

我想用触摸屏或滚动条按住鼠标，然后按住鼠标。但问题是我需要能够在点击它并移动鼠标的同时做到这一点，并且仍然可以点击它下面的东西，如链接一个东西，因为它不是图像。我找不到任何东西。有人可以告诉我任何jquery插件或css技巧或类似的东西吗？

Answer 1

好的......所以听起来你想要在按住鼠标按钮时滚动网站。这将需要一些工作在实际场景中有用。它会导致选择项目，不考虑动量，等等。

这是三个事件的结果：

＆＃39; mousemove＆＃39; ：即使未按下鼠标按钮，也始终跟踪当前鼠标位置（垂直）。这意味着无论何时移动鼠标，事件都会持续触发，但它所做的只是更改单个变量，因此性能损失最小。你可以微观管理添加和删除事件，但这很令人头疼（特别是如果你想跟踪鼠标不止一件事）。

＆＃39; mousedown＆＃39; ：设置一个标志来声明滚动已经开始，注意鼠标现在的位置，并为<的队列动画< em> next 框架可以做些什么。

＆＃39; mouseup＆＃39; ：删除mousedown事件设置的标志，这样动画的 next 帧就是此批次的最后一帧滚动。

无论鼠标左键被触发，都会触发scrollStart()和scrollStop()。您可以将其更改为scrollStart(e)和scrollStop(e)。然后，您可以检查每个功能中的e.button，看看它是左，右还是滚轮，分别返回0，2和1。

在这三个事件之外，它只是动画逻辑。每一帧，查看鼠标移动了多远，并将该偏移量（+或 - ）添加到文档的当前滚动位置。

documentScrollTop()获取文档的当前滚动位置。感谢TheMikeRoss的跨浏览器polyfill。

window.scrollTo(left, top)实际上执行滚动。

// ScrollTop polyfill from TheMikeRoss
// Lets you know how much 
function documentScrollTop() {
  "use strict";
  return (document.documentElement.scrollTop + document.body.scrollTop
  === document.documentElement.scrollTop) ?
      document.documentElement.scrollTop : document.body.scrollTop;
};

function scrollStart() {
  "use strict";
  window.bIsScrolling = true;
  window.lastMousePosition = window.mousePosition;
  window.requestAnimationFrame(drawScroll);
};

function scrollStop() {
  "use strict";
  window.bIsScrolling = false;
};

function scrollOnMove(e) {
  "use strict";
  window.mousePosition = e.clientY;
};

function drawScroll() {
  "use strict";
  var scrollDistance,
    scrollLocation;

  if (window.bIsScrolling) {
    //Mouse still held down, keep scrolling
    window.requestAnimationFrame(drawScroll);
  }

  scrollDistance = window.lastMousePosition - window.mousePosition;
  scrollLocation = window.documentScrollTop() + scrollDistance;
  window.scrollTo(0, scrollLocation);
  window.lastMousePosition = window.mousePosition;
};

window.addEventListener('mousedown', scrollStart, false);
window.addEventListener('mouseup', scrollStop, false);
window.addEventListener('mousemove', scrollOnMove, false);

如何制作垂直幻灯片

1 个答案: