Question

Shor问题 - 在电脑上打开页面，触摸屏显示效果不佳。我创建了两个大箭头，不知道如何使用JS / jQuery编程。

首先尝试：onClick-＆gt;滚动 - 它可以工作，但用户必须多次点击滚动文章。第二：

     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

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

我做了这样的事情不久之后。请随时查看我的博客文章。

此外，不确定您是否这样做，但请确保将所有JavaScript代码放在jQuery的ready（）函数中;否则，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 2

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

     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 ...有趣的事情 - 自助服务终端是基于Opera浏览器的，所以，任何解决方案？

顺便说一句。有没有关于使用FF在Linux上构建自助服务终端（不是过时的1.x版本的FF）的材料（对我来说linux没问题，但是我为FF搜索安全插件）。

Answer 3

我回复this question一段时间了......基本上它在鼠标停止时设置一个标志，在鼠标启动时清除。然后setTimeout循环，直到标志清除。此外，它还具有鼠标滚轮和拖放功能。

查看the demo

Answer 4

<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>

javascript - 如何顺利滚动页面，直到用户释放鼠标按钮

4 个答案: