Detect scroll movement of a select

Question

Detect scroll movement of a select

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have this example code:

</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>

How can I detect the movement of the scroll of select ?, if the scroll is the page, there is no problem but if it is the select there is no way to detect anything.

javascript jquery html

asked by Quarkbite 27.10.2017 в 12:03

source

2 answers

how can I activate IntelliSense in SQL Server 2014 when I connect to a server in azure? How do I solve this problem in the creation of a web in python?

score 2 · Answer 1

You can not detect this event from a browser, since it is rendered on the client side. But you're not lost, try using select2 if you can handle these events.

I give you an example of how the selection would be after using the select2 library.

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

Once you have this, you can use the onScroll % of ul event if you use Javascript pure or the scroll jQuery event. Something like this:

$("ul.select2-results__options").scroll(function() {
  alert("Se ha hecho scroll!");
});

score 0 · Answer 2

I did the test with div with the use of angular, I managed to recognize the event ' scroll ' in a div , but when I change it for select it does not work.

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>