search

paulirish / w3fools

https://www.w3fools.com/
152 stars 42 forks source link

Smooth scrolling script has its quirks in Opera #10

Closed mathiasbynens closed 13 years ago

mathiasbynens commented 13 years ago

The smooth scrolling script in js/script.js works fine in most browsers, but will always scroll from the top of the document in Opera. Try it out, it’s a weird effect.

I once made a jQuery plugin for smooth scrolling that works cross-browser (the key is that some browsers need to animate the body element, while others need to animate html instead).

I’d love to fix this and throw in this bad boy, but I’d love to get some feedback first. What do you guys think? https://github.com/mathiasbynens/Smooth-Scrolling-jQuery-Plugin

Even without that plugin it would be an easy fix (considering the use of $.browser.opera is okay here).

danheberden commented 13 years ago

I'm not typically a fan of scrolling plugins, so I'd vote to simply fix the opera bug specifically - I think it can be detected by HTML height vs body?.. I'll try to get to it in the am if you haven't already worked your magic ;)

paulirish commented 13 years ago

i love the animated scrolling.

i'd love to do it without the sniff.

it looks detectable. or workaroundable.

mathiasbynens commented 13 years ago

For now, I “fixed” it in 366fd226196bd9cb4851ecec940dbcb64789de34 using $.browser.opera. Would you guys prefer something like (window.opera && String(window.opera) == '[object Opera]') so that it will still work when jQuery.browser gets removed?

I would love to know how to detect this, but I honestly have no idea. html always has a greater height than body in this case, in all browsers. Any ideas?

Keeping this issue open until we have a robust feature detection–based fix.

SlexAxton commented 13 years ago

+1 on opera inference over UA. If anyone changes their UA strings, it's probably opera users. cc MikeTaylr

mathiasbynens commented 13 years ago

You’re right SlexAxton, Opera inference ftw. I’ll remove $.browser.opera in my next commit.

As for the feature detection, Paul had some interesting ideas:

[10:26:51] <paul_irish> window.scrollTo(0,20)
[10:27:06] <paul_irish> $('html,body').animate(scrolltowhatever...
[10:27:28] <paul_irish> var fuckup = window.scrollTop < 20;
[10:28:00] <paul_irish> shitty detect. but thats the first draft.

Will play around with it later tonight and hopefully commit a patch.

miketaylr commented 13 years ago

Yeah, prototypejs's var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]'; is way better than $.browser.opera if that's what you need to do.

danheberden commented 13 years ago

just so no one wastes any time, i got this fixed in both opera and FF without the browser sniff using a bit of paul's idea

mathiasbynens commented 13 years ago

@danheberden fixed this in commit c21d08555cf037e25735b586bbfe8f5af6eea191.