单击 children select 时防止滚动

Question

有这样的结构

<div style="overflow-x:auto; overflow-y: hidden; width: 100%; white-space: nowrap;">
  <table>
    <tbody>
      <tr>
        <td>
          <select>
            *some options*
          </select>              
        </td>
      </tr>
    </tbody>
  </table>
</div>

当我第一次点击 select 时，滚动会重置到最左边的位置。当我第二次点击它时，它停留在当前位置。这个 select 由 Chosen 图书馆创建，真实看起来像

<div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 215px;" title="">
  <a class="chzn-single" tabindex="-1">
    <span>selected option</span>
  </a>
<div class="chzn-drop"><div class="chzn-search">
  <input type="text" autocomplete="off" readonly="">
</div>
<ul class="chzn-results">
  <li class="active-result result-selected" style="" data-option-array-index="0">Option2</li>
  <li class="active-result" style="" data-option-array-index="1">Option3</li>
  <li class="active-result" style="" data-option-array-index="2">Option4</li>
</ul>
</div>
</div>

Answer 1

问题出在 Chosen 库的 .focus 方法中。关闭下拉方法。只需对此发表评论，它就会停止重置滚动

单击 children select 时防止滚动

Prevent scroll when children select clicked

html

jquery-chosen