0

Tengo un sitio que retomé desde otro sitio que ya tenía la empresa, en la página de "Localizar sucursal", al presentar los datos de la sucursal, a manera de lista; el scroll es infinito y no es responsive, ya que al verlo en un celular, es complicado bajar el scroll. Lo que me interesa es que en lugar de flechas verdes, sea únicamente la barra regular del navegador y no sea infinito.

La verdad que no sé mucho de programación, lo que sé es bastante básico.

La página es la siguiente.

Ya hice las correccciones del div incompleto y los estilos que faltaban, pero aun no puedo con el scroll.

PHP "localizatusucursal.php"

<code>


</script>
<div class="page">

  <div class="consult_suc_selects" style="padding-bottom: 2%">
  Estado 
  <select id="estado" name="estado" class="rc4">
   <option>Seleccione un estado</option>   
  </select>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  Ciudad
   <select id="ciudad" name="ciudad" class="rc4">
    <option>-----------&nbsp;&nbsp; </option>
   </select>

 </div>

 <div> 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh1gZvUsD9ljetIt-i5jfTPtXhHB8uq7Y&sensor=true"> </script>

   <div>

        <div id="sucursales" class="sucursales col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding: 2%">
        <br /><br />
        Seleccione un estado y una ciudad.
    <!--        <ul >

     <li>          
        <span><b>1. Av. México </b></span><br />
         Prolongación Av. México, Plaza las Lomas Local No. 8<br />
         Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
         01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
         <br /></li>
        <li>          
        <span>1. Av. México </span><br />
         Prolongación Av. México, Plaza las Lomas Local No. 8<br />
         Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
         01 (993) 1-39-35-54                      <b>Ver Mapa</b>
        <br /></li>
     <li>          
        <span>1. Av. México </span><br />
         Prolongación Av. México, Plaza las Lomas Local No. 8<br />
         Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
         01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
        <br /></li>




      </ul>
        -->  

<!-- <script type="text/javascript" src="js/libs/simplyscroll/re_.js"></script>
<script type="text/javascript" src="js/libs/simplyscroll/common.js"></script>
<script type="text/javascript" src="js/libs/simplyscroll/jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="js/libs/simplyscroll/jquery.simplyscroll.css" media="all" type="text/css">


-->


      </div>

<!--         <div class="box_consult_suc_izq_flechas">
        ss
        <br />-<br /> 
        ss 
      </div>-->

      </div>

<!--       <div class="box_consult_suc_mid"></div>
-->
   <div class="mapa col-lg-6 col-md-6 col-sm-12 col-xs-12" id="showMap">
       <!-- <img src="images/local_suc_map.png"  /> -->
      </div>


 </div><br />


</div>


    <script type="text/javascript">
    $(function() {    



  $(".d1_der_box_mid").addClass("box_consult_suc_selected");    


 $(".box_consult_suc").hide().animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
      opacity: "toggle"
 }, 1500, "linear", function() {
    //$( this ).after( "<div>Animation complete.</div>" );
 });


});
</script> 

<!--------------------fin--------------->

  </div></div>
  </code> 

El scroll está en otro archivo llamado p_citys.php, donde encontré estas opciones del scroll

<code>
  echo $res."</ul>             
  <script type='text/javascript'>
     (function($) {
     $(function() {
      $('#sucs').simplyScroll({
      customClass: 'vert',
      orientation: 'vertical',
      auto: false,
      manualMode: 'loop',
        frameRate: 40,
        speed: 10           
    });
    });
     })(jQuery);

    </script>"; 
</code>
5
  • Hola Rebeca, te sugiero que leas ¿Cómo elaboro una buena pregunta?. Por otro lado, como recomendación personal, es que te tomes un tiempo para emprolijar tu código. Eso ayuda mucho a la hora de buscar un error o de editar algo mas adelante. el 10 ago. 2018 a las 20:13
  • Gracias, hice unas ediciones, espero ser más comprensible el 10 ago. 2018 a las 20:20
  • La lista no es infinita. El problema que tiene, es que re repite 3 veces. el 10 ago. 2018 a las 20:28
  • Hola @RebecaLopezCobarrubias si la respuesta la hallaste por ti misma, en bien de la comunidad debes autoresponder tu pregunta y darla como respuesta correcta o elegir de las respuestas dadas, cual fue la más cercana. Éxitos! el 13 ago. 2018 a las 15:38
  • Muchas gracias! el 14 ago. 2018 a las 16:43

1 respuesta 1

0

Para esconder los botones verdes puedes agregar en el cssun display:none

.simply-scroll-back simply-scroll-btn simply-scroll-btn-up,simply-scroll-forward simply-scroll-btn simply-scroll-btn-down{
  display:none
}

Esto esconde los 2 botones.

Por otro lado, para poder scrolear la lista tienes que editar el css de la clase que contiene el ul. Ponerle una altura por defecto

.simply-scroll-list{
  height: 300;
}

Y a el ul de adentro ponerle la misma altura

#sucs{
  overflow: overlay;
  height: 300px
}

Por ultimo, tu lista parece infinita, pero no lo es. Tiene generadas, 3 listas iguales, en un mismo div. Por lo que cuando terminas una, automaticamente te aparece la otra. Busca eliminar de alguna manera las 2 listas extras que se generan.

1
  • 1
    Le quité manualMode: 'loop', y con eso solucioné la lista infinita. Gracias, lo de los estilos también me sirvió! el 13 ago. 2018 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.