Предотвратить прокрутку пользователя при использовании переполнения: авто в Chrome

Question

Итак, у меня есть это <div /> с overflow: auto. Внутри него несколько <input type="text" /> элементов. Половина div скрыта; пользователь должен щелкнуть некоторые навигационные ссылки, чтобы скрыть первую половину и показать вторую половину.

Оказывается, что в Chrome (не в Firefox или IE), если пользователь помещает курсор в <input type="text" />, а затем перетаскивает его вправо, он может <div /> "прокрутить" вправо и покажи вторую половину его содержания !!

Лучшее, что я могу придумать, чтобы предотвратить это, - это какая-то глупая setInterval проверка, которая при необходимости изменит положение div. Есть ли что-нибудь чище?

Answer 1

Почему бы не что-то вроде этого:

<div class="container">
  <div class="content">
  </div>
</div>

.container {
  width:400px;
  overflow:hidden;
  position:relative;
}

.container .content {
  width:800px;
  position:absolute;
  top:0;
  left:0;
}

Содержимое в два раза шире контейнера, но вторая половина скрыта. Чтобы отобразить вторую половину, просто установите right:0; (или left:-400px;) на .content div.

обновление

Установите ширину содержимого равной ширине контейнера (в данном примере 400px), пока вы не будете готовы показать вторую часть, затем измените размер содержимого до 800px и переместите его для отображения нового содержимого.