Solved

HTML/JavaScript Scroll Focus

Posted on 2007-11-14
7
3,847 Views
Last Modified: 2013-11-19
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
Comment
Question by:dale_abrams
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 168 total points
ID: 20283087
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
 
LVL 11

Assisted Solution

by:petiex
petiex earned 166 total points
ID: 20283228
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
 
LVL 11

Expert Comment

by:petiex
ID: 20283378
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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
LVL 1

Author Comment

by:dale_abrams
ID: 20284240
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
 
LVL 16

Assisted Solution

by:LeeKowalkowski
LeeKowalkowski earned 166 total points
ID: 20613245
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
 
LVL 1

Expert Comment

by:Computer101
ID: 20943738
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question