javascript - how to scroll page smothly until user relese mouse button

Question

Shor question - page opened on pc with not-so-good touch-screen display. I created 2 big arrows and dont know how to program it using JS/jQuery.

First try: onClick->scroll - it works but user must tap many times to scroll article. Second:

     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();

 });

Doesnt work ;) I`m trying to simulate real browser scroll arrows - until you keep preesed mouse button page scrolls down (or up).

Answer 1

I answered this question some time back... basically it sets a flag when the mouse is down and clears when the mouse is up. Then a setTimeout loops until the flag clears. Also, it has mousewheel and drag-and-drop functionality.

Check out the demo

Answer 2

Your code above doesn't work because JavaScript is not multi-threaded. That is, your while loop is eating CPU and probably preventing other code from running (i.e. the mouseup event).

I did something like this not too long back. Please feel free to check out my blog post.

Also, not sure if you're doing this or not, but make sure that you place all of your JavaScript code in jQuery's ready() function; otherwise, jQuery may not find the #scUp element.

Here's the relevant code from my old blog post:

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');
});

...and the link: http://blake-miner.blogspot.com/2010/08/javascript-sticky-footer-and-scroll.html

Hope this helps!

Answer 3

In meantime I wrote this code:

     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);          
 });

It works BUT not on Opera ... funny thing - kiosk is based on Opera browser, so, any solution?

btw. Is there any materials about building kiosk (not outdated for 1.x version of FF) on Linux with FF (linux is no problem for me but I searching for security-plugin for FF).

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>