Solved

HTML/JavaScript Scroll Focus

Posted on 2007-11-14
7
3,837 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Duplicate Elements with JS / jQuery 3 24
Read text on Table 7 29
Word Press Fixes to Google Speed Test Issues 2 25
Scroll 5 news at a time using vticker 2 11
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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 the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

733 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