在鼠标滚轮滚动时更改选择输入中的选定项目

Posted

技术标签:

【中文标题】在鼠标滚轮滚动时更改选择输入中的选定项目【英文标题】:Change the selected item in select input on mouse wheel scrolling 【发布时间】:2019-01-09 21:22:23 【问题描述】:

我正在使用 Bootstrap 自定义表单选择输入供用户选择国家/地区。 我的问题是我必须在滚动鼠标滚轮时将下拉菜单中的选择项更改为下一项。

Fiddle Link

我的代码

    <select id="inputCountry" class="custom-select">
            <option>Country...</option>
            <option>Afghanistan</option>
            <option>Albania</option>
            <option>Algeria</option>
            <option>American Samoa</option>
            <option>Andorra</option>
            <option>Angola</option>
            <option>Anguilla</option>
            <option>Antigua &amp; Barbuda</option>
            <option>Argentina</option>
            <option>Armenia</option>
            <option>Aruba</option>
            <option>Australia</option>
            <option>Austria</option>
            <option>Azerbaijan</option>
            <option>Bahamas</option>
            <option>Bahrain</option>
            <option>Bangladesh</option>
            <option>Barbados</option>
</select>

【问题讨论】:

您的链接无效。即使剥离,它也不起作用。 请等我更新 小提琴链接无效。 请检查我更新了它 你的问题是什么? 【参考方案1】:

您可以检查焦点,如果没有更改selectedIndex

document.getElementById('inputCountry').addEventListener('wheel', function(e) 
    if (this.hasFocus) 
        return;
    
    if (e.deltaY < 0) 
        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
    
    if (e.deltaY > 0) 
        this.selectedIndex = Math.min(this.selectedIndex + 1, this.length);
    
);
<select id="inputCountry" class="custom-select">
  <option>Country...</option>
  <option>Afghanistan</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antigua &amp; Barbuda</option>
  <option>Argentina</option>
  <option>Armenia</option>
  <option>Aruba</option>
  <option>Australia</option>
  <option>Austria</option>
  <option>Azerbaijan</option>
  <option>Bahamas</option>
  <option>Bahrain</option>
  <option>Bangladesh</option>
  <option>Barbados</option>
</select>

【讨论】:

谢谢。这是仅使用 CSS 还是通过 bootstrap 完成的? 应该是this.length-1 而不是this.length

以上是关于在鼠标滚轮滚动时更改选择输入中的选定项目的主要内容,如果未能解决你的问题,请参考以下文章

使用鼠标滚轮时如何加快 JScrollPane 中的滚动速度?

Swift-4 MacOS检测鼠标滚轮滚动到NSTextField?

WPF:如何在拖动 ListView 项目时允许在 ListView 中使用鼠标滚轮滚动?

ulli鼠标滚轮水平滚动

js 检测鼠标滚轮上下滚动

网页不能用鼠标滚轮控制滚动条 我鼠标滚轮上下滚动。。但网页没反应。这是怎么回事。。怎么修复。。