Javascript 在移动触摸设备上，输入中的html文本溢出拒绝滚动

我的应用程序中有一个基本的html文本输入字段，如下所示

<input class="note-title" type='text' placeholder='Untitled Note'/>

但是由于某种原因，如果输入中的文本比输入本身长，我无论如何都无法在x方向滚动。即使我聚焦输入，并使用放大工具尝试将输入滚动到最后，它也不起作用

在桌面上，输入沿x方向滚动即可。仅在手机上，我无法在x方向滚动输入

我尝试过添加

-webkit user select auto

和其他css修复程序，但似乎没有任何效果

我想做的就是能够在移动设备上左右滚动输入。另一件奇怪的事情是，输入模糊后，输入会自动向左滚动。谢谢你的帮助，谢谢

更新：

如果我使用下面的黑客，输入现在可以滚动。。。但我想知道为什么默认设置不会滚动

# hack to fix the issue where you cannot scroll any inputs from left to right
if Mobile
  startingNoteTitleXPos = 0
  currentNoteTitleXPos = 0

  $('body').on 'touchstart', 'input', (e) ->
    startingNoteTitleXPos = e.offsetX
    currentNoteTitleXPos = e.target.scrollLeft

  $('body').on 'touchmove', 'input', (e) ->
    endingNoteTitleXPos = e.offsetX
    newScrollPos = startingNoteTitleXPos - endingNoteTitleXPos
    e.target.scrollLeft = currentNoteTitleXPos + newScrollPos

---

hmmm您的代码在这里运行良好：fiddle.jshell.net/768b4jnp（使用开发工具移动设备）。除了颜色NoteTille不存在之外谢谢Olivier但它也适用于我使用移动开发工具。。。但当你真的在移动设备上尝试时，它不起作用。。。。

# hack to fix the issue where you cannot scroll any inputs from left to right
if Mobile
  startingNoteTitleXPos = 0
  currentNoteTitleXPos = 0

  $('body').on 'touchstart', 'input', (e) ->
    startingNoteTitleXPos = e.offsetX
    currentNoteTitleXPos = e.target.scrollLeft

  $('body').on 'touchmove', 'input', (e) ->
    endingNoteTitleXPos = e.offsetX
    newScrollPos = startingNoteTitleXPos - endingNoteTitleXPos
    e.target.scrollLeft = currentNoteTitleXPos + newScrollPos