[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3863
  • Last Modified:

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.
0
dale_abrams
Asked:
dale_abrams
3 Solutions
 
b0lsc0ttCommented:
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
 
petiexCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
LeeKowalkowskiCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now