Cómo bloquear la navegación horizontal en una página web con imágenes laterales

Wizard · 24 Jun 2013

Buenos días, actualmente me estoy creando una web para prestar unos servicios (No de programdor obviamente jaja), pero me han surgido problemas, que medianamente he podido resolver, pero me he topado con uno que me tiene más de 4 horas pensando como hacer y no logro arreglarlo, el problema es el siguiente, tenía mi página lista pero por cosas de estética le he agregado imágenes a los costados mediante CSS, ahora bien como las imagenes a los costados de la web, se salen del ancho de la pantalla aparece un scrollbar horizontal, buscando por internet, he visto que con:

.mi-clase { overflow-x: hidden }

Este scroll se oculta, pero ahora bien, la función de poder mover a los lados no se arregla simplemente se oculta la barra (Si utilizo las flechas del tecla hacia la derecha o hacia la izquierda igualmente se dezplaza), entonces quisiera saber si es posible bloquear la navegación horizontal en la web y de ser posible como podría hacerlo?

Joscplan · 24 Jun 2013

Creo que jquery te podría ayudar.

Insertar CODE, HTML o PHP:

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});

Este código afecta PgUp(33), PgDn(34), Fin(35), Inicio(36), Flecha Izquierda(37), Flecha Arriba(38), Flecha Derecha(39), Flecha Abajo(40)

GrdEnrique · 26 Jun 2013

generalmente esas imagenes a los costados se las agregan con css como background-image al contenedor para evitar eso mismo. otra cosa es que al momento de ponerlas tienes que tomar en cuenta que porcion veran los usuarios con X resolucion y asi... para ayudarte a elegir la mas pequeña deberias revisar en analytics.

Cómo bloquear la navegación horizontal en una página web con imágenes laterales

Wizard

Joscplan

GrdEnrique