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 >
  <div ></div>
  <input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" />
</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!

CodePudding user response：

Ok, so I did discover that 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;
});

With that said, if there is a simple CSS solution, I will accept that answer over this one.

CodePudding user response：

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.