Deslizamiento de página horizontal responsivo

Problema

Diseñar un sistema de navegación horizontal responsivo presenta varios desafíos:

• Mantener la página visibilidad dentro de la ventana gráfica
• Evitar espacios o superposiciones entre páginas
• Permitir páginas que se extienden más allá del 100% de altura, con visibilidad de la barra de desplazamiento
• Garantizando compatibilidad con Internet Explorer 9 o superior

Solución

Esta solución emplea jQuery e incluye las siguientes características clave:

1. Tamaño adaptable: El script calcula el ancho total del contenedor en función del número de páginas, lo que garantiza un escalado receptivo.
2. Transición suave: Al hacer clic en los enlaces de navegación, se anima suavemente el margen izquierdo del contenedor, lo que permite realizar la transición entre páginas sin saltos abruptos.
3. Manejo dinámico de altura : Las páginas pueden extenderse más allá del 100% de altura y aparece una barra de desplazamiento cuando es necesario, eliminando páginas no deseadas. espacios.
4. Indicación de enlace activo: El enlace de navegación seleccionado se resalta para indicar la posición actual de la página.
5. Compatibilidad con IE: El código es compatible con Internet Explorer 9 y superior.

Implementación 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;
}

Conclusión

Este fragmento de código proporciona una solución integral para la navegación de páginas horizontal responsiva, abordando de manera eficiente los requisitos establecidos. Su flexibilidad permite menús de navegación dinámicos y acomodar páginas largas con barras de desplazamiento. Además, su compatibilidad con Internet Explorer 9 garantiza la compatibilidad con una amplia gama de navegadores.