[Javascript] Scorrimento reattivo della pagina orizzontale


Answers

"come scala è necessario attaccare alla pagina e non rivelare gli altri"

Per ottenere ciò, mantieni un riferimento all'elemento di pagina corrente e quindi esegui uno scroll senza ritardi per questo elemento quando la finestra viene ridimensionata:

var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
    var targetPage = $(jQuery(this).attr('href'));
    jQuery('a.scrollitem').removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery('.toggle').css({'display':'none'});
    jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
        jQuery('.toggle').css({'display':'block'});
    });
    currentPage = targetPage; //here is where we set the reference
    return false;
});

//and here we do a no-delay scrollTo
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

Questo lo rende piuttosto reattivo, secondo me.

le pagine devono essere lunghe (800px) e comunque scorrevoli, senza il vuoto sull'ultimo.

Per liberarmi di questa lacuna, faccio in modo che tutte le page un po 'più lunghe di quanto debbano essere. Lo scorrimento non è influenzato da questo poiché le pagine sono giustificate a left:0; con left:0; . Sospetto che le altre pagine abbiano lo stesso vuoto e che le lacune di quelle pagine siano state coperte dalla barra di scorrimento.

.page {
    width: 110%;
}

ha bisogno di lavorare su un minimo di 9

Temo di non poter aiutare in questo senso; Ho installato solo IE11. Ma hey, funziona alla grande in IE11.

Violino funzionante

Question

Voglio creare una navigazione della pagina reattiva orizzontale come illustrato dall'immagine qui sotto:

Questo è quello che sono riuscito a fare: DEMO

$(document).ready(function () {
    var slideNum = $('.page').length,
        wrapperWidth = 100 * slideNum,
        slideWidth = 100/slideNum;
    $('.wrapper').width(wrapperWidth + '%'); 
    $('.page').width(slideWidth + '%');
    
    $('a.scrollitem').click(function(){
        $('a.scrollitem').removeClass('selected');
        $(this).addClass('selected');
        
        var slideNumber = $($(this).attr('href')).index('.page'),
            margin = slideNumber * -100 + '%';
    
        $('.wrapper').animate({marginLeft: margin},1000);
        return false;
    });
});
html, body {
    height: 100%;
    margin: 0;
    overflow-x:hidden;
    position:relative;
}
nav{
    position:absolute;
    top:0; left:0;
    height:30px;
}
.wrapper {
    height: 100%;
    background: #263729;
}
.page {
    float:left;
    background: #992213;
    min-height: 100%;
    padding-top: 30px;
}
#page-1 {
    background: #0C717A;
}
#page-2 {
    background: #009900;
}
#page-3 {
    background: #0000FF;
}
a {
    color:#FFF;
}
a.selected{
    color: red;
}


.simulate{
    height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
    <nav>
        <a href="#page-1" class="scrollitem selected">page 1</a>
         <a href="#page-2" class="scrollitem">page 2</a>
         <a href="#page-3" class="scrollitem">page 3</a>
    </nav>
    <div id="page-1" class="page"> 
         <h3>page 1</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-2" class="page">  
         <h3>page 2</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-3" class="page"> 
        <h3>page 3</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
</div>

Ho comunque colpito alcuni muri di mattoni, in quanto il mio è in qualche modo sensibile, proprio come la scala in cui deve essere incollato alla pagina e non rivelare gli altri.

Inoltre, se le pagine sono lunghe, mostra una barra di scorrimento che è perfetta, ma nell'ultima diapositiva c'è uno spazio largo quanto la barra di scorrimento.

Ho i seguenti requisiti:

  1. Ha bisogno di essere reattivo
  2. le pagine devono essere lunghe (800px) e comunque scorrevoli, senza il vuoto sull'ultimo.
  3. ha bisogno di lavorare su un minimo di 9