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

Тем временем я написал этот код:

     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, так что, какое-нибудь решение?,Есть ли какие-либо материалы о сборке киоска (не устаревшего для версии 1.x FF) в Linux с FF (linux для меня не проблема, но я искал плагин безопасности для FF).

Answer 3

Я ответил на этот вопрос некоторое время назад ... в основном он устанавливает флаг, когда мышь нажата, и очищается, когда мышь поднимается.Затем setTimeout зацикливается, пока флаг не исчезнет.Кроме того, он обладает колесиком мыши и функцией перетаскивания.

Проверьте демо

Answer 4

Ваш код выше не работает, потому что JavaScript не многопоточный.То есть ваш цикл while потребляет процессор и, вероятно, не позволяет запускать другой код (например, событие mouseup).

Я сделал что-то подобное не так давно.Пожалуйста, не стесняйтесь проверить мой пост в блоге.

Кроме того, не уверен, делаете ли вы это или нет, но убедитесь, что вы поместили весь свой код JavaScript в функцию ready () jQuery;в противном случае 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

Надеюсь, это поможет!