HTML/JavaScript Scroll Focus

I have a website that has a couple textarea boxes on it. When people use their mouse to scroll down the page, it usually ends up over one of the textareas and then starts to scroll within the textarea, rather than continuing to scroll down the page. This is rather irritating and I would like to find a way to disable the mouse scrolling behavior unless one of these textarea boxes are clicked in. Is there some way to do this?

Example:
My URL is: http://pipes.dealflowmedia.com.
put your mouse at the top center of the page and then begin using your mouse scroller to scroll down the page.
LVL 1
dale_abramsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
dale_abrams,

That is annoying behavior but there is no way to disable mouse scrolling for the textarea.  Javascript can pick up scrolling but there isn't a way to lock or ignore it for the textarea.  Even if that could be done the browser may not scroll the page but might just not respond to the scrolling at all.

You have my vote for "fixing" it but I do understand why the design the browsers to work that way.  We will probably just have to live with it.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
petiexConnect With a Mentor Commented:
You can set the overflow style of the textarea to hidden and toggle it to normal as it gains/loses focus, as in the example below, but that also hides the scrollbar when the text area does not have focus. Possibly you could add a background image with a scrollbar on it to the .scroll style below.
<html>
    <head>
        <style>
            <!--
             .noscroll {overflow: hidden;}
             .scroll {}
            -->
        </style>
    </head>
    <body>
        <textarea class="noscroll" cols="25" onblur="this.className='noscroll'" onfocus="this.className='scroll'"
                  rows="12">
            This is some sample text. I will take this opportunity to describe what this sample
            purports to do. When the user scrolls down the page, the scroll focus should not get
            stollen by this text area, it should only scoll when it is focused in. When you focus
            out, the overflow is hidden, so, it shouldn't scroll. That is the point of this sample.
            There is a very large paragraph following this so the page has something to scroll on.</textarea>
        <p style="font-size:500pt">very large paragraph</p>
    </body>
</html>
0
 
petiexCommented:
I just tried the scrollbar background image trick. I took a screenshot of the scrollbar on a textarea and saved it as "scrollbar.png", then by changing the .noscroll css definition to this:

.noscroll {overflow: hidden; background: url('scrollbar.png') no-repeat top right; padding-right: 15px;}

you get a fake scrollbar. It's pretty crazy.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
dale_abramsAuthor Commented:
Thanks for your help guys. Petiex, you came up with a great idea. Unfortunately, it doesnt really work for me. I tried it out and found that having an image of a scrollbar where there is a variable amount of content is not doable. This is because the size of the 'real' scrollbar is not static, and the image is. Also, I don't like that a user would have to click twice on the scrollbar to actually get it to scroll. Once to bring the window into focus, and another to actually click on the scrollbar. Any other ideas?
0
 
LeeKowalkowskiConnect With a Mentor Commented:
Is this the behaviour of all browsers or just Internet Explorer?

Internet Explorer has a onmousewheel event that you can use on the textareas to return false unless the textarea has focus:

<textarea onfocus="this.canScroll=true" onblur="this.canScroll=false" onmousewheel="return this.canScroll">

--

I cannot test this for you sorry, my laptop doesn't have a mouse, and I usually have my mousewheels set to scroll a whole page at a time anyway...

--
Lee
0
 
Computer101Commented:
Forced accept.

Computer101
Community Support Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.