?
Solved

HTML/JavaScript Scroll Focus

Posted on 2007-11-14
7
Medium Priority
?
3,851 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 672 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 664 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
Industry Leaders: 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!

 
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 664 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 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