Android上可滚动元素中的文本选择错误

时间:2017-02-17 16:12:45

标签: android html css google-chrome

我正在努力解决我在Android上的Chrome中遇到的文本选择问题。

在可滚动div中选择一些文本,向下滚动一点然后选择更多文本时会出现这种情况。选择的开始跳出div到页面顶部。

有没有办法阻止选择跳起来?

我已将此Plunker放在一起演示此问题,在Android设备或Browserstack上打开它: https://plnkr.co/edit/J9nV0yfsR3vkyNc6GGlF

HTML:

1. Don't select this text.
<div>
  2. Select some text in this view, scroll it and select some more.<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis felis ac orci blandit suscipit. Aliquam tempus, magna vitae interdum accumsan, nibh sem finibus purus, sed ullamcorper metus eros sed nisl. Duis ac interdum tortor, non ultricies massa. Nam malesuada, augue non euismod porta, tellus velit porttitor erat, a imperdiet ex massa sed sem. Nullam iaculis turpis vitae auctor ultrices. Vivamus id tellus ac nibh scelerisque convallis. Proin dictum augue tincidunt libero auctor, viverra hendrerit nulla rutrum. Sed eu gravida odio. Donec sem nunc, commodo vitae tellus nec, semper gravida turpis. Nulla fringilla sapien ligula. Vestibulum interdum pharetra neque, eu rutrum elit tincidunt ut.
  Praesent accumsan sapien id erat malesuada, eget consequat magna egestas. Fusce feugiat massa vitae pellentesque commodo. In porttitor ultrices tortor, nec auctor purus varius sit amet. Aliquam molestie eget magna non vestibulum. Ut vitae ultricies velit. Donec blandit erat at lacus sollicitudin lacinia. Vestibulum placerat vestibulum commodo. Donec quam lectus, iaculis a sapien a, imperdiet rutrum elit. Integer non condimentum augue. Proin suscipit scelerisque ante in rhoncus.
  Integer dolor sem, semper at scelerisque varius, dignissim quis ligula. Nunc porta dolor dui, sed finibus justo consequat non. Suspendisse potenti. Nulla vestibulum tellus lectus, nec sollicitudin magna consectetur quis. Cras laoreet, elit consequat lacinia volutpat, ligula sem ultricies urna, blandit volutpat velit felis quis quam. Nulla ac vehicula enim. Quisque non blandit orci. In blandit et nisi ac dignissim.
  Aliquam non diam nisi. Phasellus aliquet, lorem in efficitur bibendum, felis metus lacinia enim, gravida porta est magna vel mi. In sem nulla, commodo eget rhoncus non, pellentesque tincidunt tellus. Sed sodales, odio et elementum sagittis, ligula enim facilisis velit, sit amet euismod elit augue at diam. Vestibulum eu eleifend nisl. Donec blandit quam et ante posuere, ac ullamcorper nunc blandit. Praesent sagittis tincidunt enim, at auctor quam scelerisque quis. Quisque et nisl vel orci sagittis ultricies. Aliquam sed tellus ex. Duis consequat laoreet tempus. Nam dignissim eros id ex pharetra, at tempus magna tincidunt. Maecenas congue eu eros vel tempus. Nulla vehicula, mi sit amet interdum gravida, ligula tortor pellentesque dolor, at viverra turpis nisi sit amet dolor. Nam viverra mollis scelerisque.
  Aliquam non diam nisi. Phasellus aliquet, lorem in efficitur bibendum, felis metus lacinia enim, gravida porta est magna vel mi. In sem nulla, commodo eget rhoncus non, pellentesque tincidunt tellus. Sed sodales, odio et elementum sagittis, ligula enim facilisis velit, sit amet euismod elit augue at diam. Vestibulum eu eleifend nisl. Donec blandit quam et ante posuere, ac ullamcorper nunc blandit. Praesent sagittis tincidunt enim, at auctor quam scelerisque quis. Quisque et nisl vel orci sagittis ultricies. Aliquam sed tellus ex. Duis consequat laoreet tempus. Nam dignissim eros id ex pharetra, at tempus magna tincidunt. Maecenas congue eu eros vel tempus. Nulla vehicula, mi sit amet interdum gravida, ligula tortor pellentesque dolor, at viverra turpis nisi sit amet dolor. Nam viverra mollis scelerisque.
  Suspendisse arcu sapien, rhoncus ac dolor a, cursus tincidunt ex. Morbi efficitur vitae quam in mattis. Proin posuere pellentesque est, ut tristique elit varius et. In ornare venenatis mauris, eget convallis erat suscipit hendrerit. Proin nisl diam, pellentesque ut facilisis nec, dignissim vitae leo. Sed mattis molestie euismod. Duis ornare maximus pretium. Ut arcu eros, volutpat eu suscipit eget, malesuada nec eros. Donec ut congue dolor.
</div>
3. The text at 1. will be selected now.

CSS:

div {
  height: 200px;
  overflow: scroll;
}

0 个答案:

没有答案