Detect scroll of dropped-down options list in `select`?

Question

I am using a Mac, and I am making a check for when the system is idle for more than 30 seconds and I need to show an alert. But in my scenario, when the user takes more than 30 seconds to go through the options in select dropdown, the alert gets fired.

I want to detect scrolling of those options. I've tried binding the scroll event to the select elements present in the page, both directly and through event delegation. My aim is like when I open a dropdownlist and scroll through the options in it, the system should get a feeling like its not idle.

Here's an example:

$(document).on("scroll","select", function(e){
  console.log("You are scrolling through select box options");
});


/*
$('select').scroll(function(e){
  console.log("You are scrolling through select box options");
});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
</div>

Answer 1

This is a great question, and I spent a little more time that I probably should have, trying to figure it out.

From my research, this is not possible with a default HTML Select Element, because the select element window is not actually part of your page DOM, but rather a context window of the browser, similar to when you right click on something and get the right click context menu. Here is how I determined that there are no events being fired on the select box that you might hope for.

Using Google Chrome, open the developer console and enter this:

monitorEvents(document.body);

This turns on an event watcher for the entire document and will log all events happening. Go into the select list and watch the console, scroll with mouse, use arrow keys, scroll the toolbar. Nothing happens.

Try 'window' instead of 'document.body' - still nothing.

I also checked the MDN Web Docs, and found no evidence of an event to hook for this window: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

NOW - To Solve Your Problem

SOLUTION 1:

If you want to be able to do this, you'll need to create a your own select box, perhaps with a scrollable div and selectable LI elements inside it.

SOLUTION 2:

Use focus() and blur() on your select element to tell when someone has it selected.

var isSelect = false;

$("#selectlist").focus(function() {
console.log("I have focus");
isSelect = true;
})

$("#selectlist").blur(function() {
console.log("I lost focus");
isSelect = false;
})

Set a variable when the list is focused and do not fire the timeout. Not 100% effect, a user could get around the timeout simply by leaving the select list focused, but it does work.

SOLUTION 3:

Make the select option window part of your DOM by giving it a size.

<select name="optionList" id="optionList" size="3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

And then listen for mouseenter on the "option" element.

$('select').on('mouseenter', 'option', function(e) {
    console.log(this.value);
});

By giving the select element a size - you keep it in the page instead of becoming a floating window separate from your page. This only works for mouse, but you could also probably add touch event support if you needed for mobile.