时间戳

首页 > 解决方案 > 如何保持 div 可滚动溢出，但禁用任何其他触摸动作？

css - 如何保持 div 可滚动溢出，但禁用任何其他触摸动作？

问题描述

我想在具有固定大小和位置的 div 中显示纯文本。

文字由JS动态添加，长度可变。如果文本创建溢出，则文本应在此 div 内可滚动（向上+向下）...

我的身体设置为“触摸动作：无”，因为我不希望用户在我的页面上捏缩放。这很好用，在带有“溢出：滚动”的“.textfield”上除外。

如何创建一个带有可滚动溢出文本但没有任何其他触摸动作的 div？

我已经尝试设置元视口，但它没有工作......

body  {
touch-action: none;
}

.textfield  {
position: absolute;
top: 50px;
left: 50px;
display: block;
width: 200px;
height: 300px;
padding: 20px;
border: 1px solid green;
overflow: scroll;
}

.textfield::-webkit-scrollbar {
    display: none;
}
<body>
<div class="textfield">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>

...

标签： cssscrolloverflowdisable

解决方案

利用pointer-events: none;

.textfield  {
position: absolute;
top: 50px;
left: 50px;
display: block;
width: 200px;
height: 300px;
padding: 20px;
border: 1px solid green;
overflow: scroll;
pointer-events: none;
}

推荐阅读