4

It's hard to explain the issue, as this seems more like a cross-browser bug than it does a feature. Follow the steps here to see the issue:

Steps to reproduce:

  1. Run code snippet.
  2. Click in textbox.
  3. Repeatedly press right-arrow key until text cursor passes edge of box.
  4. At this point the box will start 'scrolling' (in spite of the overflow: hidden). The grey background element that should fill the box 'slides' left, and to the right of it the white background behind can then be seen.

Desired behavior:

When going out of box, the text cursor simply escapes view, and the box scroll position does not slide to compensate.

How can I disable this 'no scrollbar' scrolling effect? (Note, it is in fact scrolling, because the js scrollLeft value of the overflow-box actually changes, even without a scrollbar.)

A CSS solution would really be ideal (e.g., a working overflow: hidden), but a Javascript solution could still suffice.

.overflow-box {
  margin: 20px;
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid black;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #a0a0a0;
}
.textbox {
  position: relative;
  margin: 20px;
  width: 200px;
}
<div class="overflow-box">
  <div class="background"></div>
  <input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" class="textbox"/>
</div>

I apologize if this question is a duplicate. I cannot find a similar question since I don't know what the effect is called..

TIA!

Improve this question
2
  • If you reduce the width of the input to hit the edge of the parent div, that would solve the issue .. This can be done manually, or by calculating what the width should be with JS. Commented Oct 7, 2022 at 19:49
  • Thanks @Zak. I understand that. That will help some people, but in my project it's actually not this simple. I'll have many inputs that float partly or completely out of the container. I'm looking for a solution that makes the container prevent scrolling whilst being agnostic about its contents. Since overflow: hidden doesn't actually prevent scrolling, CSS needs a better alternative. Commented Oct 7, 2022 at 22:42

2 Answers 2

Reset to default
3

Ok, so I discovered two things:

  1. The issue only occurs on elements with overflow: hidden
  2. When 'scrolling', the box emits the scroll event when changing, allowing one to do the following to prevent the scrolling:
document.querySelector('.overflow-box').addEventListener('scroll', evt => {
    evt.target.scrollTop = 0;
    evt.target.scrollLeft = 0;
});

Since I have a specific container that needs to prevent scroll, I'm using CSS to set overflow: hidden on it to trigger the issue on the container and not a parent element, and then I'm applying the JS above to prevent the scrolling.

This seems to be the best solution in my case.

If anyone knows of a simpler CSS solution, I will accept that answer over this one.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Scratching my head on this for a long time. This solution was the only one I could find which worked. My situation was a draggable dialog which can be dragged out of the bounds of its container, but I don't want the container to scroll if the text in the dialog runs off the screen, since the user can drag it back if they want to enter text. Thanks!
0

I am not sure if this what did you asking about:

  1. if you need to solve problem of hidden content you only need to resize width at first and last selector
  2. if you need to make text with scroll you can change type into text area and then defining rows and cols attribute, this should manage that.

If all of this does not help please add some picture of the expected result you need to make it clear.

Improve this answer

1 Comment

Welcome to SO! Sorry, if I'm unclear. I added clarifying steps to reproduce and desired behavior if that helps. To answer your question, I don't want ANY scrolling at all, and I WANT the content to stay hidden. I just want the text cursor to disappear out of view with no side-effects. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.