Prevent scroll in textbox

Question

If my textbox happens to be focused and you use the scroll within it, the page scroll gets bugged. In other words, it looks like I am scrolling within my textbox rather than the page, which causes me to have to reload the page if I want to remove the bug.

The only work around I have is once the textbox is focused and I want to scroll the page I have to click the body of the page to unfocus. Not every user will know this issue and could cause the page scroll to the bug. Is there a way to prevent scroll on the textbox? Not sure what this feature is called.

FYI: tried something like this bug scroll still happens

textbox {
    position: fixed;
    white-space: nowrap;
    overflow: hidden;
}

JsFiddle https://jsfiddle.net/nmbga0nu/3/

it does not run the code in this snippet but it shows my CSS. I am using asp.net textbox/label but that shouldn't affect why the scroll happens. has to be something with CSS or bootstrap.

score 0 · Answer 1 · answered Jul 25 '17 at 14:18

0

Try overflow: hidden; on the textbox and let me know if it worked.

You could also post your code so we can have a context.

answered Jul 25 '17 at 14:18

Cătălin Costan

93
8

updated my post. I tried `overflow:hidden` but didn't work. – narue1992 Jul 25 '17 at 14:18
try `position: absolute;` – Cătălin Costan Jul 25 '17 at 14:22
still bugs with `absolute`. this is a weird bug cuz once you scroll in textbox the page itself seems stuck. – narue1992 Jul 25 '17 at 14:24
Please create a jsfiddle with that exact component and append it to the question – Cătălin Costan Jul 25 '17 at 14:25
I loaded my css in the jsfiddle. it won't run but you can see what I use – narue1992 Jul 25 '17 at 14:33

score 0 · Answer 2 · answered Jul 25 '17 at 15:18

found an alternative at Prevent mouse wheel scrolling, but not scrollbar event. JavaScript

I used:

<script type = "text/javascript">
      window.onwheel = function () { return false; }
</script>
 <script type = "text/jscript">
     $(window).bind('mousewheel DOMMouseScroll', function (event) { return false });
</script>

This just removed scrolling period on the window/text and forces user to drag scroll of page.

Prevent scroll in textbox

2 Answers2