Question

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

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

这是输入中的css

note-title
  background-color transparent
  outline 0
  border 0
  width 95%
  color noteTitle
  font-size 20px
  font-weight 400
  opacity 1
  -webkit-appearance none
  overflow scroll

由于某些原因，如果输入内的文本长于输入本身，我无论如何都无法在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

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

0 个答案: