1

Tengo este codigo de ejemplo:

</head>
 <script>
$(document).ready(function() {
    $('#contenido2').scroll(function(){
            var windowHeight = $('#contenido2').scrollTop();
            console.log(windowHeight);
            });
});
</script>
<body>  

<div id="contenido">

  <select id="contenido2">
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
  </select>
</div>
</body>
</html>

Como puedo detectar el movimiento del scroll de select?, si el scroll es el de pagina, no hay problema pero si es el del select no hay manera de que detecta nada.

1
  • Lamentablemente no existe un evento scroll que se lance en el elemento nativo <select>, tendrías que usar algún componente que simule ser un select Commented el 27 oct. 2017 a las 11:05

2 respuestas 2

2

No puedes detectar este evento desde navegador, dado que se renderiza en el lado del cliente. Pero no estas perdido, prueba a usar select2 que si te permite manejar estos eventos.

Te pongo un ejemplo de como quedaria el select despues de usar la libreria select2.

<span class="select2-results">
<ul class="select2-results__options" role="tree" id="select2-x4am-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option" role="group" aria-label="Alaskan/Hawaiian Time Zone">
        <strong class="select2-results__group">Alaskan/Hawaiian Time Zone</strong>
        <ul class="select2-results__options select2-results__options--nested">
            <li class="select2-results__option" id="select2-x4am-result-wabm-AK" role="treeitem" aria-selected="true">Alaska</li>
            <li class="select2-results__option select2-results__option--highlighted" id="select2-x4am-result-s7im-HI" role="treeitem" aria-selected="false">Hawaii</li>
        </ul>
    </li>
    <li class="select2-results__option" role="group" aria-label="Pacific Time Zone">
        <strong class="select2-results__group">Pacific Time Zone</strong>
        <ul class="select2-results__options select2-results__options--nested">
            <li class="select2-results__option" id="select2-x4am-result-uihp-CA" role="treeitem" aria-selected="false">California</li>
            <li class="select2-results__option" id="select2-x4am-result-h7ix-NV" role="treeitem" aria-selected="false">Nevada</li>
            <li class="select2-results__option" id="select2-x4am-result-jl5v-OR" role="treeitem" aria-selected="false">Oregon</li>
            <li class="select2-results__option" id="select2-x4am-result-2e8j-WA" role="treeitem" aria-selected="false">Washington</li>
        </ul>
    </li>
    <li class="select2-results__option" role="group" aria-label="Mountain Time Zone">
        <strong class="select2-results__group">Mountain Time Zone</strong>
        <ul class="select2-results__options select2-results__options--nested">
            <li class="select2-results__option" id="select2-x4am-result-upe1-AZ" role="treeitem" aria-selected="false">Arizona</li>
            <li class="select2-results__option" id="select2-x4am-result-w72c-CO" role="treeitem" aria-selected="false">Colorado</li>
            <li class="select2-results__option" id="select2-x4am-result-q4b6-ID" role="treeitem" aria-selected="false">Idaho</li>
            <li class="select2-results__option" id="select2-x4am-result-anl2-MT" role="treeitem" aria-selected="false">Montana</li>
            <li class="select2-results__option" id="select2-x4am-result-thbi-NE" role="treeitem" aria-selected="false">Nebraska</li>
            <li class="select2-results__option" id="select2-x4am-result-ow68-NM" role="treeitem" aria-selected="false">New Mexico</li>
            <li class="select2-results__option" id="select2-x4am-result-wq1q-ND" role="treeitem" aria-selected="false">North Dakota</li>
            <li class="select2-results__option" id="select2-x4am-result-qc22-UT" role="treeitem" aria-selected="false">Utah</li>
            <li class="select2-results__option" id="select2-x4am-result-pdc9-WY" role="treeitem" aria-selected="false">Wyoming</li>
        </ul>
    </li>
    <li class="select2-results__option" role="group" aria-label="Central Time Zone">
        <strong class="select2-results__group">Central Time Zone</strong>
        <ul class="select2-results__options select2-results__options--nested">
            <li class="select2-results__option" id="select2-x4am-result-ahw5-AL" role="treeitem" aria-selected="false">Alabama</li>
            <li class="select2-results__option" id="select2-x4am-result-epw3-AR" role="treeitem" aria-selected="false">Arkansas</li>
            <li class="select2-results__option" id="select2-x4am-result-djo5-IL" role="treeitem" aria-selected="false">Illinois</li>
            <li class="select2-results__option" id="select2-x4am-result-48nq-IA" role="treeitem" aria-selected="false">Iowa</li>
            <li class="select2-results__option" id="select2-x4am-result-z9b8-KS" role="treeitem" aria-selected="false">Kansas</li>
            <li class="select2-results__option" id="select2-x4am-result-c3qi-KY" role="treeitem" aria-selected="false">Kentucky</li>
            <li class="select2-results__option" id="select2-x4am-result-bqwz-LA" role="treeitem" aria-selected="false">Louisiana</li>
            <li class="select2-results__option" id="select2-x4am-result-9iyt-MN" role="treeitem" aria-selected="false">Minnesota</li>
            <li class="select2-results__option" id="select2-x4am-result-o3cp-MS" role="treeitem" aria-selected="false">Mississippi</li>
            <li class="select2-results__option" id="select2-x4am-result-v0yz-MO" role="treeitem" aria-selected="false">Missouri</li>
            <li class="select2-results__option" id="select2-x4am-result-ct81-OK" role="treeitem" aria-selected="false">Oklahoma</li>
            <li class="select2-results__option" id="select2-x4am-result-dqar-SD" role="treeitem" aria-selected="false">South Dakota</li>
            <li class="select2-results__option" id="select2-x4am-result-sh8p-TX" role="treeitem" aria-selected="false">Texas</li>
            <li class="select2-results__option" id="select2-x4am-result-qqgp-TN" role="treeitem" aria-selected="false">Tennessee</li>
            <li class="select2-results__option" id="select2-x4am-result-vxqb-WI" role="treeitem" aria-selected="false">Wisconsin</li>
        </ul>
    </li>
    <li class="select2-results__option" role="group" aria-label="Eastern Time Zone">
        <strong class="select2-results__group">Eastern Time Zone</strong>
        <ul class="select2-results__options select2-results__options--nested">
            <li class="select2-results__option" id="select2-x4am-result-di6s-CT" role="treeitem" aria-selected="false">Connecticut</li>
            <li class="select2-results__option" id="select2-x4am-result-o46k-DE" role="treeitem" aria-selected="false">Delaware</li>
            <li class="select2-results__option" id="select2-x4am-result-t2ij-FL" role="treeitem" aria-selected="false">Florida</li>
            <li class="select2-results__option" id="select2-x4am-result-m9l2-GA" role="treeitem" aria-selected="false">Georgia</li>
            <li class="select2-results__option" id="select2-x4am-result-g598-IN" role="treeitem" aria-selected="false">Indiana</li>
            <li class="select2-results__option" id="select2-x4am-result-7ntg-ME" role="treeitem" aria-selected="false">Maine</li>
            <li class="select2-results__option" id="select2-x4am-result-onug-MD" role="treeitem" aria-selected="false">Maryland</li>
            <li class="select2-results__option" id="select2-x4am-result-d2dd-MA" role="treeitem" aria-selected="false">Massachusetts</li>
            <li class="select2-results__option" id="select2-x4am-result-v85c-MI" role="treeitem" aria-selected="false">Michigan</li>
            <li class="select2-results__option" id="select2-x4am-result-obw9-NH" role="treeitem" aria-selected="false">New Hampshire</li>
            <li class="select2-results__option" id="select2-x4am-result-zzdx-NJ" role="treeitem" aria-selected="false">New Jersey</li>
            <li class="select2-results__option" id="select2-x4am-result-7ydt-NY" role="treeitem" aria-selected="false">New York</li>
            <li class="select2-results__option" id="select2-x4am-result-8uq8-NC" role="treeitem" aria-selected="false">North Carolina</li>
            <li class="select2-results__option" id="select2-x4am-result-7dv9-OH" role="treeitem" aria-selected="false">Ohio</li>
            <li class="select2-results__option" id="select2-x4am-result-9ofh-PA" role="treeitem" aria-selected="false">Pennsylvania</li>
            <li class="select2-results__option" id="select2-x4am-result-7lye-RI" role="treeitem" aria-selected="false">Rhode Island</li>
            <li class="select2-results__option" id="select2-x4am-result-13zm-SC" role="treeitem" aria-selected="false">South Carolina</li>
            <li class="select2-results__option" id="select2-x4am-result-3nof-VT" role="treeitem" aria-selected="false">Vermont</li>
            <li class="select2-results__option" id="select2-x4am-result-wcs2-VA" role="treeitem" aria-selected="false">Virginia</li>
            <li class="select2-results__option" id="select2-x4am-result-9rgp-WV" role="treeitem" aria-selected="false">West Virginia</li>
        </ul>
    </li>
</ul>

Una vez que tienes esto ya puedes usar el evento onScroll del ul si utilizas Javascript puro o el evento scroll de jQuery. Algo como esto:

$("ul.select2-results__options").scroll(function() {
  alert("Se ha hecho scroll!");
});
7
  • Creo que sería oportuno para que la respuesta estuviera completa, que pusieras un ejemplo de como controlar esos eventos con ese componente.
    – frikinside
    Commented el 27 oct. 2017 a las 10:30
  • en la web de select2 no veo esa opcion por ningun lado. Si que veo una opcion de cargar opciones dinamicamente en funcion de si se llega una posicion determinada, que al final es lo que quiero hacer, que cuando el usuario se desplace hasta la posicion 50, que cargue 100 opciones mas, y que cuando se desplace a la 100, cargue 100 mas y asi sucesivamente.
    – Quarkbite
    Commented el 27 oct. 2017 a las 10:42
  • @Quarkbite yo supongo que se refiera a que como select2 lo que hace es construir un selector propio en html. Puedes recuperar la capa en donde se encuentran las opciones y suscribirte al evento scroll de la misma.
    – frikinside
    Commented el 27 oct. 2017 a las 10:59
  • Editado con un ejemplo de la documentación oficial Commented el 27 oct. 2017 a las 11:07
  • @ManuelRobles Así mucho mejor, no obstante, como la pregunta es concretamente sobre como gestionar el evento en cuestión igual el ejemplo pudiera ser sobre el evento (el que hay está bien, pero no responde a la pregunta). Lo que responde a la pregunta es el enlace que poner, pero sería preferible que además del enlace la solución se encontrase también en la respuesta, de este modo se mejora las búsquedas y posicionamiento de la solución y no queda completamente invalidada si el enlace se rompe o muere.
    – frikinside
    Commented el 30 oct. 2017 a las 8:50
0

Hice la prueba con div con el uso de angular, logre que reconosca el evento 'scroll' en un div, pero cuando lo cambio para select no funciona.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {});

app.directive('goScroll', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {

      elem.on('scroll', function(evt) {
        console.log("moviendome");
      });
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#contenido2').scroll(function() {
      var windowHeight = $('#contenido2').scrollTop();
      console.log(windowHeight);
    });
  });
</script>

<body ng-app="app" ng-controller="ctrl">

  <div>

    <div style="height: 400px; border:solid 1px black; overflow:auto;" go-scroll>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
    </div>
  </div>
</body>

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.