jquery - 自定义滚动事件

Question

假设我有一个用Thymeleaf 制作的演示页面，其中有一个表格。此 table 有 5 列，但在其中一列中我可以拥有多个元素:

 <table id="table1" data-toggle="table" data-search="true">
  <thead>
    <tr>
      <th data-sortable="true">Code</th>
      <th data-sortable="true">Furnisher(s)</th>
      <th data-sortable="true">Description</th>
      <th data-sortable="true">Category</th>
      <th data-sortable="true">Quantity</th>              
    </tr>
  </thead>
  <tbody>
    <tr th:each="element : ${dto}">
      <td><span th:text="${dto.id}"></span></td>
    </tr>
    <td>
      <div class="furnisherList" onscroll="handleOnScroll(this)">
       <span th:each="supplier : *{dto.furnisherList}">
         <span th:text="${supplier.company_name}"></span>
         <br>
       </span>
      </div>
    </td>
    ...
    ... <!-- others column with at most 1 element -->
    ...
  </tbody>
 </table>

类 furnisherList 具有以下 css:

.furnisherList {
  overflow-y: auto;
  height: 12px;
}

当有多个元素时，列显示如下:

Magic 是列表的第一个元素，其他元素隐藏(溢出)在它下面。

现在我喜欢这个图形，表格行必须很细，滚动按钮位置很好，但我想自定义滚动按钮上的点击事件。

我想在用户单击滚动按钮(无论是向上还是向下)时打开一个窗帘(如下拉菜单)。

现在，我编写了一个简单的 JQuery 函数来读取 furnisherList div 中的元素:

function handleOnScroll(element) {
  $(element).find('span').each(function() {
    $(this).find('span').each(function() {
        alert($(this).text());
    });
  });
}

这很好用，除了以下事实:如果我单击(一次)滚动按钮，该功能将触发(至少)两次!

我已经尝试使用 event.preventDefault()、$(element).stopScroll() 但没有任何效果..

你能帮帮我吗？？

---

我按照 Ggs 所说的将以下代码写入 Thymeleaf 页面解决了:

<div class="furnisherList">
  <span th:if="${#lists.size(dto.furnisher) > 1}">
    <select class="furnisherOptions">
      <option th:each="supplier : *{dto.furnisher}" th:text="${supplier.company_name}"></option>
    </select>
  </span>
  <span th:unless="${#lists.size(dto.furnisher) > 1}" th:each="supplier : *{dto.furnisher}">
    <span th:text="${supplier.company_name}"></span>
    <br>
  </span>
</div>

furnisherList CSS:

.furnisherList {
  /* overflow-y: auto; */
  height: 12px;
}

furnisherOptions CSS:

.furnisherOptions {
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

不需要其他JQuery函数。谢谢大家。

Answer 1

你应该完全使用 Select 输入:

<div class="custom-select" style="width:200px;">
  <select id="select">
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
  </select>
</div>

和一个函数 Change 函数来捕捉选择的变化:

$( "#select" ).change(function() {
  alert( "Handler for .change() called." );
});