javascript - 如何平滑滚动页面直到用户释放鼠标按钮

Question

简短的问题 - 在电脑上打开的页面，触摸屏显示不太好。我创建了 2 个大箭头，但不知道如何使用 JS/jQuery 对其进行编程。

第一次尝试：onClick->scroll - 它可以工作，但用户必须点击多次才能滚动文章。 第二：

     var scrolling = false;
 $("#scUp").mouseup(function(){
  $(this).css("opacity", 0.3);  
  scrolling = false;


 }).mousedown(function(){
  $(this).css("opacity", 1);

  scrolling = true;
  while(scrolling) {   
   $('html, body').stop().animate({ scrollTop: 50 }, 500);
  }
  event.preventDefault();

 });

不起作用；） 我正在尝试模拟真实的浏览器滚动箭头 - 直到您保持预置的鼠标按钮页面向下（或向上）滚动。

Answer 1

<div style="position:fixed">
<a href="javascript://" onmousedown="scrollAs(1);" onmouseup="scrollAs(2);">Up</a>
<a href="javascript://" onmousedown="scrollAs(3);" onmouseup="scrollAs(2);">Down</a>
</div>

<script>
var scrollValue = 2;
function scrollAs(value) {
  if(value) scrollValue = value;
  document.body.scrollTop += (scrollValue - 2)*10;
  if(scrollValue != 2) setTimeout(scrollAs, 100);
}
<script>

Answer 2

我回答了这个问题一段时间......基本上它当鼠标按下时设置一个标志，当鼠标抬起时清除。然后setTimeout循环直到标志被清除。此外，它还具有鼠标滚轮和拖放功能。

查看演示

Answer 3

上面的代码不起作用，因为 JavaScript 不是多线程的。也就是说，您的 while 循环正在占用 CPU 并可能阻止其他代码运行（即 mouseup 事件）。

不久前我做了类似的事情。请随时查看我的博客文章。

另外，不确定您是否这样做，但请确保将所有 JavaScript 代码放入 jQuery 的 read() 函数中；否则，jQuery 可能找不到#scUp 元素。

这是我旧博客文章中的相关代码：

var scrollTimer;
function scrollContent(amt)
{
    $("#content").scrollTop($("#content").scrollTop()+amt);
    scrollTimer = window.setTimeout("scrollContent(" + amt + ")", 25);
}
$(document).ready(function ()
{
    $("#content").css("overflow", "hidden");
    $("#scrollUp").mousedown(function() {
        window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
        $("#scrollUp").animate({"opacity": 100}, 'fast');
        scrollContent(-10);
    });
    $("#scrollUp").mouseup(function() {
        window.clearTimeout(scrollTimer);
        $("#scrollUp").animate({"opacity": 0}, 'fast');
    });
    $("#scrollDown").mousedown(function() {
        window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
        $("#scrollDown").animate({"opacity": 100}, 'fast');
        scrollContent(10);
    });
    $("#scrollDown").mouseup(function() {
        window.clearTimeout(scrollTimer);
        $("#scrollDown").animate({"opacity": 0}, 'fast');
    });
    //$("#scrollUp").css("opacity", 0); //Alternative
    $("#scrollUp").animate({"opacity": 0}, 'slow');
    $("#scrollDown").animate({"opacity": 0}, 'slow');
});

...以及链接：
http://blake-miner.blogspot.com /2010/08/javascript-sticky-footer-and-scroll.html

希望这有帮助！

Answer 4

与此同时，我写了这段代码：

     var scrollId = 0;

 $("#scUp").mouseup(function(){
  $(this).css("opacity", 0.3);
  clearInterval(scrollId);

 }).mousedown(function(){
  $(this).css("opacity", 1);
  var scroll = function() { $("html, body").stop().animate({ scrollTop: "-=10px" }, 15); }
  scroll();
  scrollId = setInterval(scroll, 15);          
 });

 $("#scDw").mouseup(function(){
  $(this).css("opacity", 0.3);
  clearInterval(scrollId);

 }).mousedown(function(){
  $(this).css("opacity", 1);
  var scroll = function() { $("html, body").stop().animate({ scrollTop: "+=10px" }, 15); }
  scroll();
  scrollId = setInterval(scroll, 15);          
 });

它可以工作，但不能在 Opera 上...有趣的事情 - kiosk 基于 Opera 浏览器，所以，有什么解决方案吗？

顺便提一句。有没有关于在 Linux 上使用 FF 构建 kiosk（对于 FF 1.x 版本来说还没有过时）的材料（Linux 对我来说没问题，但我正在寻找 FF 的安全插件）。