/    Sign up×
Community /Pin to ProfileBookmark

Scrollbar onclick event?

Copy linkTweet thisAlerts:
Aug 06.2007

I’ve got an idea about new ways of rapidly going through large sets of data, but I’m not sure how possible it is.

If you imagine a div with an overflow:scroll property, the data, which in this case is a blog post with a title, description, a link to the full article and date. As seen here;
[url]http://www.webdeveloper.com/forum/attachment.php?attachmentid=9405&stc=1&d=1186399809[/url]

To be able to traverse the data rapidly on scroll, the theoretical functionality is as follows; When a user clicks on the scrollbar, the description, link and date are removed (with an attractive slide event), all that remains is the title.
Onclick:
[url]http://www.webdeveloper.com/forum/attachment.php?attachmentid=9406&stc=1&d=1186400253[/url]

Finally when a user releases from the scrollbar, the data expands back out to normal.

The question is; how does one attach/emulate the onclick event for a scrollbar?

Many thanks,

AS

[upl-file uuid=b85b1e09-7129-47b8-8891-299fe0b0e191 size=32kB]Picture 2.png[/upl-file]

[upl-file uuid=69a28861-4b83-482e-a9b1-cd64830fd719 size=11kB]onclick-scrollbar.gif[/upl-file]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Angry_Black_ManAug 06.2007 — http://developer.mozilla.org/en/docs/DOM:window.onscroll

i only looked at it momentarily.. it doesnt capture the "onclick" youre looking for, but im sure you can work with being able to trap the immediate movement of the scrollbar
Copy linkTweet thisAlerts:
@ApekatthjerneAug 06.2007 — The effect that you're looking for isn't easily achievable and probably not worth it.

Probably the best alternative is creating a toggle button that's fixed (positive:fixed) and always viewable on scroll. That way you can still have the fading/animation effect and it won't be forced upon users, giving them the option to use it.
Copy linkTweet thisAlerts:
@AdamSeeauthorAug 06.2007 — Yes it isn't very easy to achieve. The problem is our clients really want it. Using proprietary methods would be ok at this point, but definitely as a final solution, I've no idea if it's even possible.

Thanks for pointing me towards some more info. Even though, it isn't an onclick event for the scrollbar, it's made me realise some other pitfalls such as the data size being smaller, thus the scrollbar will increase in size as soon as a user scrolls. I could figure out the window size beforehand and compensate, for the minimised data, but already the JavaScript is getting rather cumbersome.

If anyone does know of a way to 'onclick' hook the scollbar, it'd be greatly appreciated.
Copy linkTweet thisAlerts:
@ApekatthjerneAug 07.2007 — Possibly another solution would be to have the description text hidden by default and only shows when the title is focused/hovered over.

Here's an example: http://www.1true.co.uk/fastscroll.html
Copy linkTweet thisAlerts:
@AdamSeeauthorAug 07.2007 — Yeah, unfortunately it's not what they want.

However, we've started prototyping this http://codepress.co.uk/code/onclick-scroll/

It's for firefox only (only works FF/PC currently) and is not completed, but shows a proof of concept idea on it.
Copy linkTweet thisAlerts:
@ApekatthjerneAug 12.2007 — If the client really really wants it, then you could try hiding the scrollbar and creating one in JavaScript. That way, you can be sure what is being clicked.

Also, I recommend you make use of the scroll wheel: http://adomas.org/javascript-mouse-wheel/
Copy linkTweet thisAlerts:
@AdamSeeauthorAug 24.2007 — thanks, it definitely seems the best solution. Trying to use real scrollbars just wasn't going to work!
Copy linkTweet thisAlerts:
@ZnupiAug 24.2007 — You can capture onmousedown and onmouseup on the whole div, and use object.clientWidth (the width without scrollbars, i think) and object.offsetWidth (the width with scrollbars) to determine whether the mouse was over the scrollbar or not...

[b]Edit:[/b] here's something to play with. It seems easier than what you've done [URL=http://codepress.co.uk/code/onclick-scroll/]here[/URL], it's shorter, etc: http://znupi.is-a-geek.net/work/test.html. It works properly only in firefox, in IE6 it doesn't work at all, and in Opera it only captures the mousedown event.

[b]EDIT AGAIN:[/b] I made it better. It now works in IE6, too, but like in opera it doesn't get the mouseup event on the scrollbar... but it gets mouseover and mouseout, and you could use that...
×

Success!

Help @AdamSee 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.28,
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,
)...