/    Sign up×
Community /Pin to ProfileBookmark

Custom Scrollbar Keyboard Access

Copy linkTweet thisAlerts:
Feb 10.2009

Hello all.

I’m in the final stage of building a custom scroll bar for my page.

The last step is for me to assign keyboard actions.

Can anyone spell out, or point me to, a list of the various keys and their respective actions?

So far, I know that the arrow keys will scroll a line and continue if held … and that the space / shift-space will scroll a page and continue if held.

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@MrNobodyFeb 10.2009 — Left/Right arrow keys also scroll left/right.

PageUp, PageDown, Home, and End keys

also scroll the page appropriately.
Copy linkTweet thisAlerts:
@robindeanauthorFeb 10.2009 — I assume that pageup / pagedown behave the same as space / shift-space. Correct?

What do the home / end keys do?
Copy linkTweet thisAlerts:
@MrNobodyFeb 10.2009 — I assume that pageup / pagedown behave the same as space / shift-space. Correct?[/QUOTE]
Yes. HOME scrolls all the way to the top and END scrolls all the way to the bottom.
Copy linkTweet thisAlerts:
@robindeanauthorFeb 10.2009 — Thanks!

If there are any more, please post them here.
Copy linkTweet thisAlerts:
@MrNobodyFeb 10.2009 — With NumLock off, the equivalent Numeric Keypad keys (eight of them) do the same things.
Copy linkTweet thisAlerts:
@robindeanauthorFeb 10.2009 — Do those particular numeric keys have different codes than the standard horizontal numeric keys?
Copy linkTweet thisAlerts:
@MrNobodyFeb 10.2009 — Well, I thought they did -- but I just tested it and got the same keycode values (as long as NumLock was off) no matter whether the key was on the keypad or off of it:
[CODE]That key is code #33 a.k.a., the 'PageUp' key... Alt = false, Ctrl = false, Shift = false.
That key is code #34 a.k.a., the 'PageDown' key... Alt = false, Ctrl = false, Shift = false.
That key is code #35 a.k.a., the 'End' key... Alt = false, Ctrl = false, Shift = false.
That key is code #36 a.k.a., the 'Home' key... Alt = false, Ctrl = false, Shift = false.
That key is code #37 a.k.a., the 'LeftArrow' key... Alt = false, Ctrl = false, Shift = false.
That key is code #38 a.k.a., the 'UpArrow' key... Alt = false, Ctrl = false, Shift = false.
That key is code #39 a.k.a., the 'RightArrow' key... Alt = false, Ctrl = false, Shift = false.
That key is code #40 a.k.a., the 'DownArrow' key... Alt = false, Ctrl = false, Shift = false.[/CODE]
Copy linkTweet thisAlerts:
@robindeanauthorFeb 11.2009 — Things are going quite well.

up/down arrows (no immediate need for left/right on my site), page up/down, home/end are all working well.

My only problem is the space bar.

Pressing space by itself works (I've coded this already) but when you use Shift-space to do a page-up, it doesn't fire.

I understand that the shift key is a different animal. How should I code for shift-space page-up actions?
Copy linkTweet thisAlerts:
@MrNobodyFeb 11.2009 — I understand that the shift key is a different animal. How should I code for shift-space page-up actions?[/QUOTE]
In JavaScript terms, this is easy as the state of the [B]Alt[/B], [B]Ctrl[/B], and [B]Shift[/B] keys are indicated in the current [B]event[/B] block. But I don't know if what you're writing is a browser plugin or merely DHTML.
[CODE] var mykey, alt, ctrl, shift, str;
if (window.Event) {
mykey = evt.which;
alt = (evt.modifiers & Event.ALT_MASK) ? true : false;
ctrl = (evt.modifiers & Event.CONTROL_MASK) ? true : false;
shift = (evt.modifiers & Event.SHIFT_MASK) ? true : false;
} else {
mykey = event.keyCode;
alt = event.altKey;
ctrl = event.ctrlKey;
shift = event.shiftKey;
}[/CODE]
Copy linkTweet thisAlerts:
@robindeanauthorFeb 11.2009 — I guess it might qualify as dhtml ... blending css and javascript for a basic effect.

Thanks for spelling out some of the methods.

Based on the data above, how do I say ...

document.onkeydown = function() {

if (the key is a combination of shift/spacebar) do something

};

???

I'm not quite certain how to incorporate the code technique.
Copy linkTweet thisAlerts:
@MrNobodyFeb 12.2009 — [CODE]if (mykey == 32)
{
if (shift)
{
// Shift+Spacebar
}
else
{
// Just Spacebar
}
}[/CODE]
×

Success!

Help @robindean spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...