Utilizzo dei pulsanti freccia per scorrere la finestra orizzontalmente

Fondamentalmente ho un sito Web con contenuto a scorrimento orizzontale. Come in tutta la pagina scorre in orizzontale, non solo un div.Utilizzo dei pulsanti freccia per scorrere la finestra orizzontalmente

Sto provando a implementare i pulsanti freccia sinistra e destra che si trovano in sospeso o al passaggio del mouse (non importa quale sia ancora), scorre l'intera finestra (senza problemi) a sinistra ea destra.

Questo sito fa più o meno quello che voglio con i piccoli centrato frecce: http://www.clholloway.co.za

Qualcuno può aiutare con questo? Saluti.

fonte

2013-08-06 user2634764

Penso che con un po 'di jQuery puoi ottenere ciò che stai cercando. L'idea di base è gestire alcuni eventi (onmouseenter, mousedown, ecc ...) che è possibile utilizzare per dare il via allo scrolling.

Immaginando di avere un po 'di markup che assomiglia a questo:

<div id="parent"> 
    <div class="contentBlock">1</div> 
    <div class="contentBlock">2</div> 
    <div class="contentBlock">3</div> 
    <div class="contentBlock">4</div> 
    <div class="contentBlock">5</div> 
</div> 
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span> 

<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>

E un paio di stili per assicurare che possa causare la finestra per scorrere:

#parent { 
    width:6000px; 
} 
.contentBlock { 
    font-size:10em; 
    text-align:center; 
    line-height:400px; 
    height:400px; 
    width:500px; 
    margin:10px; 
    border:1px solid black; 
    float:left; 
} 
.panner { 
    border:1px solid black; 
    display:block; 
    position:fixed; 
    width:50px; 
    height:50px; 
    top:45%; 
} 
.active{ 
    color:red; 
} 
#panLeft { 
    left:0px; 
} 
#panRight { 
    right:0px; 
}

è possibile utilizzare una combinazione di stile, setInterval e jQuery.scrollLeft() per ottenere l'effetto desiderato.

(function() { 

    var scrollHandle = 0, 
     scrollStep = 5, 
     parent = $(window); 

    //Start the scrolling process 
    $(".panner").on("mouseenter", function() { 
     var data = $(this).data('scrollModifier'), 
      direction = parseInt(data, 10);   

     $(this).addClass('active'); 

     startScrolling(direction, scrollStep); 
    }); 

    //Kill the scrolling 
    $(".panner").on("mouseleave", function() { 
     stopScrolling(); 
     $(this).removeClass('active'); 
    }); 

    //Actual handling of the scrolling 
    function startScrolling(modifier, step) { 
     if (scrollHandle === 0) { 
      scrollHandle = setInterval(function() { 
       var newOffset = parent.scrollLeft() + (scrollStep * modifier); 

       parent.scrollLeft(newOffset); 
      }, 10); 
     } 
    } 

    function stopScrolling() { 
     clearInterval(scrollHandle); 
     scrollHandle = 0; 
    } 

}());

completa jsFiddle dimostrando questo approccio: http://jsfiddle.net/jwcarroll/atAHh/

fonte

2013-08-06 18:58:22 Josh

Grazie questo è assolutamente perfetto! Hai risolto un grosso mal di testa! E con un piccolo cambiamento, puoi convertirlo in scroll onmousedown (se qualcuno è interessato, ho alterato il violino qui per lavorare sumousedown non hover: http://jsfiddle.net/atAHh/2/). – user2634764

@ user2634764 - Nessun problema. Felice di aiutare :) – Josh

Se si imposta l'elemento body su una larghezza maggiore della porta di visualizzazione (e non si imposta overflow nascosto) il browser supporterà lo scorrimento orizzontale del tasto freccia. È lo stesso che usare lo scorrimento della freccia verticale su questa pagina web.

fonte

2013-08-06 17:56:16

Sono consapevole, ma lo scorrimento automatico dei tasti freccia sinistra/destra è troppo lento e non abbastanza regolare, secondo me. Quindi, idealmente, penso che il modo più semplice per aggirare questo è inserire pulsanti che scorrano la finestra del browser a sinistra oa destra. Sarei anche felice se potessi ottenere i tasti freccia per smussare scorrere mentre li premi e poi fermarti mentre rilasci - ma sto lottando, perché JS non è la mia lingua più forte! – user2634764

Niente può essere più veloce o più scorrevole dello scorrimento nativo. Se si catturano gli eventi in JS, si esegue continuamente il runtime JS, che indica quindi alla vista del browser di scorrere, aggiungere un livello e rallentarlo. L'unica altra cosa che potresti fare è catturare il keydown in JS e poi scorrere molto più in là di quanto normalmente farebbe, ma ciò sarebbe sconcertante per l'utente. –

Ho creato questo Fiddle per voi per aiutarvi. Dai un'occhiata e vedi se ti aiuta a orientarti nella giusta direzione. Probabilmente dovrai adattarlo alla tua situazione, ma spero che faccia ciò di cui hai bisogno.

Si prega di notare che ho inserito overflow:hidden su <body> così le barre di scorrimento esplicite non vengono visualizzate; cambiare se lo si desidera.

Cheers!

fonte

2013-08-06 19:05:24 emgee

Utilizzo dei pulsanti freccia per scorrere la finestra orizzontalmente

risposta

Problemi correlati