Używanie przycisków strzałek do przewijania w poziomie

Zasadniczo mam stronę internetową z przewijaniem treści w poziomie. Jak na całej stronie przewija się poziomo, a nie tylko div.Używanie przycisków strzałek do przewijania w poziomie

Próbuję zaimplementować lewy i prawy przycisk strzałek, które po nałożeniu lub najechaniu (to nie ma znaczenia, który z nich jeszcze), przewija całe okno (płynnie) w lewo i prawo.

Ta strona ma dość dużo, co chcę z małymi strzałkami skupione: http://www.clholloway.co.za

Czy ktoś może pomóc? Twoje zdrowie.

Źródło

2013-08-06 user2634764

Myślę, że przy odrobinie jQuery można osiągnąć to, czego szukasz. Podstawową ideą jest obsługa niektórych zdarzeń (onmouseenter, mousedown, etc ...), których możesz użyć do rozpoczęcia przewijania.

Imagining masz jakieś znaczników, który wygląda tak:

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

i kilka stylów, aby zapewnić spowoduje to okno, aby przejść:

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

Można użyć kombinacji stylizacji, setInterval i jQuery.scrollLeft(), aby osiągnąć pożądany efekt.

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

}());

Pełna jsFiddle wykazując tego podejścia: http://jsfiddle.net/jwcarroll/atAHh/

Źródło

2013-08-06 18:58:22 Josh

Dzięki temu jest absolutnie doskonały! Rozwiązałeś duży ból głowy! I z bardzo małą zmianą, możesz ją przekonwertować, aby przewinął onmousedown (jeśli ktokolwiek jest zainteresowany, zmieniłem skrzypce tutaj, aby pracować nad tym, co nie zostało zawieszone: http://jsfiddle.net/atAHh/2/). – user2634764

@ user2634764 - Nie ma problemu. Miło, że mogłem pomóc :) – Josh

Jeśli ustawisz element body na szerokość większą niż port widoku (i nie ustawisz ukrytego przelewu), przeglądarka będzie obsługiwać klawisze strzałek w poziomie, które będą przewijane automatycznie. Jest to to samo, co użycie pionowej strzałki przewijanej na tej stronie.

Źródło

2013-08-06 17:56:16

Jestem świadomy - ale automatyczne przewijanie klawiszy w lewo/w prawo jest zbyt wolne i nie jest wystarczająco płynne, według mnie. Idealnie więc myślę, że najprostszym sposobem na obejście tego jest umieszczenie przycisków przewijających okno przeglądarki w lewo lub w prawo. Byłbym również szczęśliwy, gdybym mógł uzyskać klawisze ze strzałkami, aby wygładzić przewijanie podczas ich wciskania, a następnie przestać, gdy uwolnisz - ale ja walczę, ponieważ JS nie jest moim najsilniejszym językiem! – user2634764

Nic nie może być szybsze ani płynniejsze niż natywne przewijanie. Jeśli złapiesz zdarzenia w JS, ciągle wykonujesz środowisko uruchomieniowe JS, które następnie informuje przeglądarkę, aby przewijało, dodawało warstwę i spowalniało ją. Jedyną rzeczą, którą możesz zrobić, to złapać keydown w JS, a następnie przewijać znacznie dalej niż normalnie, ale byłoby to dla użytkownika kłopotliwe. –

Stworzyłem ten Fiddle Ci pomóc. Spójrz i zobacz, czy pomaga wskazać ci właściwy kierunek. Będziesz prawdopodobnie musiał dostosować go do swojej sytuacji, ale mam nadzieję, że zrobi to, czego potrzebujesz.

Uwaga: umieszczam overflow:hidden na <body>, więc nie wyświetlają się wyraźne paski przewijania; zmienić w razie potrzeby.

Pozdrawiam!

Źródło

2013-08-06 19:05:24 emgee

Używanie przycisków strzałek do przewijania w poziomie

Odpowiedz

Powiązane problemy