How to keep overflow of div scrollable, but disable any other touch-action?

user_16279722 0
Viewed 50

I want to display plain text in a div with fixed size and position.

The text is added dynamically by JS and it's length is variable. If the text creates an overflow the text should be scrollable (up+down) within this div...

My body is set 'touch-action: none' because i don't want the user to pinch-zoom on my page. This works fine, exept on '.textfield' with 'overflow: scroll'.

How can i create a div with scrollable overflow text, but without any other touch-action?

I've tried setting the meta-viewport, but it didn't work...

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>

...

disable overflow scroll css
1 Answers

Use 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;
}
user_143602270
Related