Prevent scroll when children select clicked

Question

Have structure like this

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

And when i clicked select first time scroll resets to leftmost position. When i clicked it 2nd time it stays at the current position. This selects created by Chosen library and for real looks like

<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

Trouble was in .focus method on Chosen library. Close to dropdown method. Just comment this and it stop reseting scroll