Web page will not scroll with keys until clicked

Question

The website I'm working on will not scroll until somewhere on a page is clicked with the mouse or 'tabbed' through with the tab key.

Is there a simple answer I am over looking?

EDIT- Okay here is a simple bit of javascript I need help with.

I put this bit at the end of the existing javascript file being called

 function setFocus() {
        document.getElementById("#realBody").focus() ;
 }

I put this bit(just the onload part) in the main php file

</head>
<body class="<?php print $classes; ?>" onload="setFocus()">
  <div id="realBody">

This isn't working, if this simple code is usable I'd love some pointers.

I am trying to draw focus to realBody

@xanderer No code example, As simple as I can put it is, Loadpage, try to scroll with pagedown or arrow down, can't, click anywhere, now you can scroll with keys. — winchendonsprings, Jun 27 '11 at 19:38
@Greg Hewgill, I'm not sure, can I check that with the DOM tab on firebug? — winchendonsprings, Jun 27 '11 at 19:39
@winchendonsprings darn, I would like at @WEFX answer. No link to the page either? — xanderer, Jun 27 '11 at 19:40

score 4 · Answer 1 · answered Jun 27 '11 at 19:35

4

Perhaps you are focusing on a text field or dropdown menu, and your input (scrolls) are tied to that one control? Are you explicitly calling Focus() on one of the controls on the page?

answered Jun 27 '11 at 19:35

WEFX

8,298
8
66
102

I'm not sure. There is a lot going on on the page. Anyway to figure it out what element gets first focus with firebug? – winchendonsprings Jun 27 '11 at 19:47
I'm not sure about finding the element using firebug/fiddler, but [this post](http://stackoverflow.com/questions/512296/how-to-determine-which-control-on-form-has-focus) lists a few suggestions. – WEFX Jun 27 '11 at 20:02
Is there a way to do it with css? A way to force focus? The link you provided seems reasonable but it's above my level at the moment. – winchendonsprings Jun 27 '11 at 21:07
[This page](http://www.w3schools.com/css/sel_focus.asp) talks about adding a yellow outline to the web-control that has focus via CSS. – WEFX Jun 27 '11 at 21:48
I was just looking at that page before I checked back here. I also just edited the question with a little bit of code that maybe you can help out with. I am trying to draw focus to a section of the page rather than an input field if that matters. – winchendonsprings Jun 27 '11 at 23:18

score 3 · Answer 2 · answered Jun 28 '11 at 02:57

3

remove the hash mark '#'.

Or if your using jQuery

 $(function() {
      $('#realBody').focus();
 });

answered Jun 28 '11 at 02:57

Nathan Romano

7,016
3
19
18

removed th hash mark. Still not focused on load. I realize there are other factors, but is there anything I can try? Add a little more to the code? – winchendonsprings Jun 28 '11 at 06:02

score 0 · Answer 3 · answered Jun 27 '11 at 21:39

0

WEFX is probably right, it sounds like you have a focus issue. Try adding the code from this article so it focuses on a text input or other field that won't steal the scroll wheel.

http://www.wombatnation.com/2008/07/setting-html-input-field-focus-on-load

As far as I know there isn't a good way to do it in CSS, but there is very little javascript involved here. It won't bite, I promise :)

answered Jun 27 '11 at 21:39

Chriszuma

4,464
22
19

I just added a bit of code to the question that I grabbed from your link. Maybe you can tell what's wrong. – winchendonsprings Jun 27 '11 at 23:19
Try focusing on a specific input field or 'a' tag. I don't think you can focus on a div like that. – Chriszuma Jun 28 '11 at 14:13

score 0 · Answer 4 · edited Aug 24 '23 at 02:32

Had a similar problem lately where the page would not scroll until I clicked. I was using the shadcn ui Select tag and I set the defaultOpen attribute to true.

<FormField control={form.control} name="role" render={({ field })=> (
    <FormItem className="col-span-3 md:col-span-4  w-full p-0 m-0">
        <FormControl>
            <Select disabled={!editingMode} onValueChange={(value: "mpesa" | "bank" | "paypal" )=> {
                field.onChange(value);
                }}
                **defaultOpen={true}**
                value={field.value}
                >
                <SelectTrigger
                    className="disabled:cursor-default py-2 px-0 border-l-0 border-r-0 border-t-0 ring-0 outline-none rounded-none border-b border-border focus-visible:ring-0 focus-visible:border-primary read-only:cursor-default text-[1rem]">
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    {roles?.map((role) => {
                    return (
                    <SelectItem className="capitalize" value={role.name}>
                        {role.name}
                    </SelectItem>
                    );
                    })}
                </SelectContent>
            </Select>
        </FormControl>
        <FormMessage />
    </FormItem>
    )}
/>

score -1 · Accepted Answer · answered Jul 12 '11 at 19:51

-1

Another guy from work fixed it. Code is

$(document).ready(function() {
  $.localScroll.hash({
    target: '#realBody'
   });

answered Jul 12 '11 at 19:51

winchendonsprings

471
2
7
17

Web page will not scroll with keys until clicked

5 Answers5