Deslizamento de página horizontal responsivo

Problema

Projetar um sistema de navegação horizontal responsivo apresenta vários desafios:

• Manutenção da página visibilidade na janela de visualização
• Evitando lacunas ou sobreposições entre páginas
• Permitindo páginas que se estendem além de 100% da altura, com visibilidade da barra de rolagem
• Garantindo compatibilidade com o Internet Explorer 9 ou superior

Solução

Esta solução emprega jQuery e inclui os seguintes recursos principais:

1. Dimensionamento responsivo: O script calcula a largura total do wrapper com base no número de páginas, garantindo um dimensionamento responsivo.
2. Transição suave: Clicar nos links de navegação anima suavemente a margem esquerda do wrapper, fazendo a transição entre as páginas sem saltos abruptos.
3. Manuseio dinâmico de altura: As páginas podem se estender além de 100% da altura e uma barra de rolagem aparece quando necessário, eliminando lacunas indesejadas.
4. Indicação de link ativo: A navegação selecionada O link é destacado para indicar a posição atual da página.
5. Compatibilidade com IE: O código é compatível com o Internet Explorer 9 e superior.

Implementação de código

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

CSS

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

Conclusão

Este snippet de código fornece uma solução abrangente para navegação de página horizontal responsiva, atendendo com eficiência aos requisitos declarados. Sua flexibilidade permite menus de navegação dinâmicos e acomoda páginas longas com barras de rolagem. Além disso, sua compatibilidade com o Internet Explorer 9 garante compatibilidade com uma ampla variedade de navegadores.