Chris B. - idéias e pensamentos » javascript

Upload de arquivos do file system direto pela interface web

Chris — Sun, 18 Apr 2010 21:39:46 +0000

Certa vez, anos atrás, pesquisei como seria possível fazer upload de arquivos do desktop direto para uma aplicação web, arrastando-e-colando. Não era.
A única coisa que achei seria implementando um java applet ou alguma solução proprietária – a Microsoft tem um lance desses no Sharepoint, o CMS deles. Desencanei.

Ai, semana passada saiu uma notícia que era possível fazer isso pelo Gmail. Acredito que a solução a qual eles chegaram não é a mesma que eu encontrei na web, mas acredito que seja algo do gênero. Basicamente, dá pra fazer isso com HTML5 se você estiver usando um browser adequado. Adequado, nesse contexto, é o Chrome 2.0+ ou Firefox 3.6

Não vou me dar ao trabalho de fazer uma explicação muito didática; se você chegou até aqui, acredito que tenha experiência em desenvolvimento de interfaces web e vai entender o que estou falando. Se não, dê alguns passos para trás antes de continuar.

Com o HTML5, muita coisa diferente em javascript foi implementada. Para o usuário poder arrastar-e-colar arquivos do file system para uma interface web, são usadas 2 funcionalidades (desculpem o nome, não achei um mais adequado):

File API
XMLHttpRequest 2

Com o primeiro (File API), você consegue manipular arquivos que são “arrastados-e-colados” para uma certa área da sua página. Manipular, nesse caso, pode ser muita coisa, mas você consegue saber o nome, file syze, content type, conteúdo do mesmo (em binário, por exemplo), etc…
Com o XMLHttpRequest versão 2 é possível fazer o envio de dados nas suas requisições em formato binário. E bacana é que existem métodos nativos para saber o status e a porcentagem da mesma – ou seja, você consegue criar uma progress bar, por exemplo.

Vou colar logo abaixo o conteúdo da página de teste, que possui comentários. Sei que o post ficou meio superficial, mas ele serve mais como referência para vocês saberem mais uma coisa do que é possível ser feito com HTML5!

Url de teste: http://www.chrisb.com.br/teste.html
*no caso, arraste arquivos do file system para a caixa com bordas pretas.

Posts relacionados

Plugin para estilizar selects com jQuery

Chris — Mon, 16 Nov 2009 11:56:53 +0000

Uma grande dificuldade que se tem em termos de interfaces para web é estilizar os selects (também conhecidos como combo boxes, desde a época do desenvolvimento de aplicativos com VB, Delphi e afins) nas páginas. Eles devem ser, até onde me lembro, os que menos possuem formas de ter o look & feel alterados.

Se você usa a jQuery UI no seu projeto, pode tentar esse plugin:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Ele foi disponibilizado na área do jQuery UI Labs, que é uma área experimental, para a qual qualquer pessoa pode enviar sua contribuição e, quem sabe, tê-la incorporada ao projeto. O bacana desse plugin?
Você consegue estilizar os selects, colocando cores, fundo, ícones, hierarquia. Tudo de uma forma muito simples:

$(‘select’).selectmenu();

O bacana é que ele já foi desenhado dentro dos temas pré-definidos da jQuery UI, então você pode aproveitar muito do look & feel criado, e ter alguns selects com essa cara abaixo!

Posts relacionados

O POG nosso de cada dia #17

Chris — Thu, 12 Nov 2009 14:02:06 +0000

Mais um POG que só o IE 6 nos faz conceber…

O problema

Comecei a usar a jQuery UI em uma implementação, mais precisamente para ter elementos (divs) de três colunas podendo ser rearranjados (dentro das colunas e entre elas) por drag’n drop. Tudo indo bem, suave, com o Sortable da UI. Nenhum bug, impressionante. Mas aí, o cliente reporta um erro: dentro de uma div, tem uns campos input checkbox que perdem a seleção quando a div é arrastada.

Na hora, já quase comecei a chorar, pois me parecia ser um daqueles bugs sem sentido solução, do IE.

O POG

Nada que o Google não resolva… uma pequena busca, e me deparo com esses posts:

O que eles falam? Que você só precisa colocar um atributo mágico chamado defaultChecked com valor defaultChecked nos inputs para ele não perder a seleção. Segue exemplo abaixo:

$(“input”).attr({checked: “checked”, defaultChecked:”defaultChecked”});

Em mais de 5 anos trabalhando – muito – com web, nunca tinha visto esse atributo, nem precisado usar. O porque setar ele? Nem fui atrás de saber, mas certamente não faz sentido! Muito bom, IE6, contribuindo para os blogs que falam sobre gambiarras!

Posts relacionados

Plugin jQuery para criar janela modal

Chris — Thu, 05 Nov 2009 00:07:04 +0000

Passando rapidinho aqui para fazer um jabá do plugin para fazer janelas modais com jQuery que o Tidbits disponibilizou.
O plugin foi feito pelo Danilo e mais alguns colegas, depois de terem procurado alguns plugins desse tipo e não terem encontrado nenhum que se adequasse ao que eles precisavam.

O jabá é porque ese plugin acabou me salvando em dois projetos na última semana.

O uso é simples: qualquer elemento ganha um método modal(). Se for um link, automaticamente é usado o href dele – mas você pode passar qualquer url como parâmetro. Será feito um request assíncrono e o resultado dele, jogado no modal.

O bom desse plugin é que ele é leve e muito fácil de usar, e precisa de muito pouca coisa – vê lá os exemplos de uso!

Uma coisa que eu acho que falta – e espero conseguir ter um tempo pra dedicar a fazer essa funcionalidade – é poder passar uma função de callback como parâmetro para ser executada assim que o request terminar. Isso pode ser contornado colocando javascript dentro do conteúdo do retorno, o que não é algo tão ruim se for um projeto pequeno – mas pode gerar uma bagunça em projetos maiores.

Então, o que falta? Você ir visitar a página do plugin: http://www.tidbits.com.br/click-modal-plugin-de-jquery-para-fazer-modal-lightbox

Posts relacionados

Novo release da Prototype e atualização da Scriptaculous – agora scripty2

Chris — Sat, 17 Oct 2009 00:04:31 +0000

Passou meio que batido – infelizmente – o lançamento de uma nova versão da Prototype, a 1.6.1, no começo de Setembro.

Faça download aqui!

Preciso fazer a minha mea culpa: tenho utilizado em praticamente 100% dos meus projetos a jQuery, e tem sobrado pouco tempo para no mínimo ler as atualizações no blog e fórum da Prototype.

Mas, vamos ao que interessa: as novidades.
Além de ganho de performance – algo que sempre foi criticado na Prototype – agora há compatibilidade com o Google Chrome 1 e o IE8, além de novos eventos de mouse suportados e uma forma de associar chaves/valores a elementos do DOM.
Ao mesmo tempo, foram feitas modificações na forma de distribuicão da biblioteca (com o uso do Sprockets) e a documentação segue o formato PDoc.

Para quem vê apenas essas alterações, pode achar que é pouca coisa, mas a Prototype sempre foi uma biblioteca bem madura, com uma clareza que poucas outras têm. Me parece que o time de desenvolvedores tentou se ater mais a ganhos de performance e documentação para esse release.

Além do que, a Prototype, como já disse outras vezes, é ideal para se construir outras coisas em cima dela – se você quer fazer componentes ricos javascript, eu indico a Prototype como base. E é isso que a antiga script.aculo.us era: um framework com efeitos e manipulação de elementos DOM por javascript, com interações do usuário. Usei o verbo no passado pois o framework está passando por uma bela reformulação, inclusive mudando de nome, para scripty2.

Ainda está em versão alpha, mas muito me agradou o que eu vi, e a forma como o código pode ser escrito. Pouco foi mostrado, mas eu acho que finalmente pode haver uma chance da Prototype voltar a respirar caso o scripty2 venha a conseguir bater de frente com a jQuery UI ou os inúmeros plugins de efeitos escritos para a jQuery (deixando claro novamente que não quero fomentar nenhuma briga entre fanboys de bibliotecas javascript!).

Para aqueles que já usaram, fica a dica. Para aqueles que nunca viram a Prototype, fica a sugestão: faça download e veja o que ela tem de bom, e como ela tem um enfoque diferente de outras bibliotecas.

Posts relacionados

Plugin para criar elementos DOM com a jQuery

Chris — Fri, 11 Sep 2009 20:34:45 +0000

Algo que sempre senti falta no core da jQuery foi a possibilidade de criar elementos DOM de uma forma mais simples – até porque estava acostumado a fazer isso com o Element() da Prototype, e não queria voltar a usar todos aqueles document.createElement() novamente.

Dei uma procurada e encontrei a jQuery DOM Elements Creator (Domec). Testei e funcionou bem, no IE6, 7 e Firefox. A sintaxe é bem simples, e para criar uma div, por exemplo, é:

$.create(‘div’, {‘id’: ‘myId’}, ‘myText’)

Vou colocar abaixo uma implementação completa que fiz, criando vários elementos e adicionando-os uns aos outros:

var div = $.create("div",{id: this.htmlId, className: this.htmlClass}, "");
$.create("input",{type: "hidden", className: "widget_type", value: this.type}).appendTo(div);
var divHandler = $.create("div",{className: "widget_handler"});
$.create("h3").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_edit"}, "edit").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_delete"}, "X").appendTo(divHandler);
$.create("br").css({clear: "both"}).appendTo(divHandler);
divHandler.appendTo(div);
$.create("div",{className: "widget_edit_area"}).appendTo(div);
$.create("div",{className: "widget_container"}).appendTo(div);

Veja a documentação do plugin para ver todas as possibilidades.

Observação: testei a performance e foi mais lento, quase o dobro do tempo, para criar elementos do que com document.createElement(). Imagino que num projeto muito grande, isso possa ser um problema, mas em projetos menores não deve ter tanto impacto.

Posts relacionados

5 novos blogs que tenho seguido #2

Chris — Mon, 07 Sep 2009 13:42:02 +0000

Mais outros 5 blogs que tenho acompanhado. Fica a dica!

eualexandre.com.br (site/blog do @kurko, com portfolio e muita coisa sobre PHP e gerIencia de projetos)
Igor Escobar (PHP, javascript e mais)
IO Tecnologia (variado, sobre tecnologia)
Análise Blogueira (o nome fala por si só!)
Blog da Webroom (a Webroom é uma agência web, e o blog é bem divertido e tem muita coisa interessante!)

Posts relacionados

8++ perguntas para o Julio Greff

Chris — Thu, 03 Sep 2009 14:32:53 +0000

Conheci o Julio através dessa vida de procurar referências no Google sobre PHP e javascript! Quando vi, estava no blog dele, vendo posts sobre (as bibliotecas javascript) Mootools e jQuery e, depois, me deparei com o framework MVC de autoria dele, chamado Spaghetti!
Já troquei muitas idéias com ele a respeito de diversos assuntos relacionados ao mundo de desenvolvimento web, desde implementações como a vida de trabalhar fazendo freela. Ainda, por coincidência, fomos convidados para escrever sobre bibliotecas javascript numa matéria da (revista) TI Digital.

Lá vão as perguntas!

1- Como você entrou no mundo da web, e como veio a se tornar um profissional da área?
Eu comecei na área da web de uma maneira bem boba. Lá por 2003 eu comecei a me interessar um pouco mais sobre informática, e quis expandir meus conhecimentos com algo mais do que Windows/Office. Procurei na internet muitas coisas que me pareceram muito interessantes: Photoshop, Corel Draw, Visual Basic, Delphi, coisas do gênero. Mas como eu não tinha acesso aos softwares, fiquei com a única coisa que eu havia encontrado e que eu podia aprender sem precisar de software algum: HTML. A partir daí comecei a pesquisar bastante sobre o assunto, lendo várias apostilas e vários sites, e descobrindo coisas novas como XHTML, CSS, PHP, JavaScript, até a minha descoberta do Ajax. Por algum motivo eu percebi que era isso que eu queria fazer, e passei a levar a sério. Com isso criei meu blog em 2006, onde comecei a postar sobre o que eu ia aprendendo. A partir daí comecei a fazer contatos, freelances começaram a aparecer aos poucos…

2 – Qual a importância dos webstandards?
Sem eles, não teríamos a web como conhecemos hoje. Embora ainda não tenhamos uma adoção completa, a coisa seria muito pior se os padrões não existissem. Eles nos permitem que tenhamos informação em vários dispositivos, e eles dão um pouco de significado à nossa informação. SEO, web semântica, scripts, todos eles se beneficiam dos standards.

3 – Quais as ferramentas que você utiliza no dia-a-dia (editores de texto, imagens, até mesmo o Sistema Operacional, etc…)?
Sou um usuário de Windows. Gosto muito de Linux, mas ele não gosta muito do meu hardware (e também não se dá bem com a Adobe). Já trabalhei em Mac, e foi uma experiêcia maravilhosa, mas meu bolso não gosta muito de maçãs. Nos editores, foi Komodo Edit no qual eu melhor me adaptei até agora. Multi-plataforma, leve, extensível, gratuito, tudo o que eu queria! Pra trabalhar com layouts, não troco meu Fireworks por Photoshop nenhum, por mais que insistam pra que eu faça isso. Sou tão fiel que uso o Fireworks até pra algumas edições de imagem. Também não abro mão de algumas outras ferramentas que vem me ajudando muito no quesito produtividade: Cygwin+Console2, Git, Launchy, VirtuaWin, MediaMonkey+SongBird (porque desenvolvedor nenhum sobrevive sem música!) e o Spaghetti* =D

4- Qual o impacto do Twitter no seu dia-a-dia online?
Eu sou um viciado em twitter. #fato. Desde que eu passei a utilizá-lo, ele virou parte do meu dia-a-dia. Uma das primeiras coisas que faço ao chegar no computador é abrir o TweetDeck e checar os últimos tweets do pessoal. Isso já me rendeu boas risadas, vários amigos, muita informação útil que dificilmente eu teria encontrado em blogs, e também uma boa quantidade de cultura inútil e tempo não-tão-bem-aproveitado…

5- Como você vê a diferença entre trabalhar em uma agência de web e como freelancer? Como é lidar com a liberdade de ser um freelancer mas não ter a “certeza” que um emprego fixo proporciona?
Se o meu dia tivesse 48 horas, eu diria que ser freelancer e trabalhar em uma agência seria a combinação perfeita: segurança e liberdade ao mesmo tempo. Mas a escolha vai da personalidade de cada um: ser um freelancer é assumir riscos, é ter disciplina, é trabalhar sempre sozinho. Trabalhar em uma agência é mais seguro, é geralmente mais divertido, aprende-se muito mais, mas pode-se aplicar com muito menos liberdades o que se aprende fora da agência. Eu ainda não escolhi qual dos dois caminhos pretendo seguir, por enquanto me mantenho nos dois, ainda não tenho a disciplina pra ser freelancer, ainda não me sinto seguro pra assumir certos riscos, mas muitas coisas na vida de agência ainda me incomodam.

6- Você é um dos que concebeu o Spaghetti. Fale mais a respeito dele (como ele surgiu, porque fazer um framework para “concorrer” com outros, etc…) ?
O Spaghetti* surgiu da nossa discordância com o framework que usávamos, o CakePHP. Ele era grande demais, pesado demais, e algumas coisas não se encaixavam na nossa maneira de escrever aplicações. O Spaghetti* surgiu, e se mantém até agora, totalmente sem pretensão de “concorrer” com outros frameworks, embora a gente goste de pensar que, se serviu pra gente, pode servir pra mais alguém também. Nossa filosofia é mantê-lo simples, sem encher de features sem que precisemos (basicamente, tudo que há no Spaghetti* surgiu da necessidade), e incentivar as boas práticas (embora algumas delas ainda não sejam facilitadas, como TDD, por exemplo). Hoje, além de me ajudar na maior parte dos meus projetos, o Spaghetti* também tem servido para MUITO aprendizado, pois nunca teria aprendido muita coisa do que sei hoje se não fosse na construção do Spaghetti*. E sei que há ainda muito mais a aprender, o que me mantém motivado a continuar a desenvolver. E, se a gente conseguir ajudar alguém no caminho, melhor!

7- Você utilizava muito Mootools, mas hoje em dia usa a jQuery (e em posts antigos do seu blog, você deixa claro que não era muito fã da jQuery). Hoje em dia, você utiliza muito a jQuery, não? Como se deu essa mudança? Foi uma imposicão do próprio mercado, onde jQuery é predominante, ou tem mais por trás disso?
Pra mim, em termos de frameworks JavaScript, não existe muito isso de mercado. Se você precisar, você aprende uma nova, pra mim é simples assim. Não aprendi jQuery por necessidade nem por imposição, foi apenas pra experimentar alguma coisa nova, por diversão. Foi aí que acabei gostando (e descobrindo que algumas coisas eu ainda não gosto). Não foi bem uma mudança, e sim mais alguma coisa pra minha caixa de ferramentas: utilizo em alguns projetos, mas Mootools ainda faz parte da maioria dos meus projetos, cada uma tem lugares em que se encaixam melhor. E, pra não permanecer sempre na mesma, logo aprendo Prototype também.

8- Você vê o PHP perdendo, em termos práticos, espaço para outras linguagens como Ruby e Python, ou acha que PHP ainda vai se manter por um bom tempo na frente das aplicações web do seu nicho?
Embora ainda esteja longe de ser significativo, acho que o PHP vem perdendo um pouco de espaço sim. Entretanto, por algumas de suas facilidades, ele ainda deve continuar na frente por mais alugm tempo. Só acredito que o PHP poderia ainda evoluir, o que não parece que vai acontecer tão cedo, já que a versão 6 não traz nada de muito interessante para algumas coisas que me incomodam nele. De qualquer maneira, o boom dos frameworks depois do Rails, apesar de diminuirem um pouco o uso do PHP, trouxe bastante evolução indiretamente. Eu também passei a prestar mais atenção no que eu escrevia só após o Rails!

Plus- Para onde você acha que a web vai, de uma forma bem ampla (tanto no que diz respeito a tecnologia, como formas de comunicação e aplicações)?
Eu acredito que a web caminhe muito para a plataforma móvel, com a integração de vários dispositivos, como câmeras, GPS, acelerômetro, tudo isso que já temos disponível e sabe-se lá mais o que vem por aí. Nem preciso falar no caminho que as aplicações desktop já estão tomando em direção a web. Também acredito, talvez em um futuro um pouco mais distante, na web semântica, uso mais inteligente da informação pelas aplicações. E, como não podia deixar de ser, acredito que o IE6 vai deixar de existir, e teremos somente browsers 100% standard-compliant =D

Posts relacionados

XMLHttpRequest cross-site: mais uma vez o IE fora do padrão

Chris — Thu, 27 Aug 2009 21:31:32 +0000

Uma questão fortemente levantada para quem implementa interfaces web é a das requisições assíncronas feitas por javascript não poder ser feitas de um domínio para o outro (por exemplo, um javascript hospedado em http://minhaurl.com não consegue acessar nenhuma outra url em outro domínio, como http://aquelaurl.com)

Tem há algum tempo a especificação 2 do XMLHttpRequest que possibilita essa funcionalidade, chamada de CORS: Cross-Origin Resource Sharing
Basicamente, é uma troca de headers específicos entre cliente e servidor para formalizar e garantir a origem da requisição.

Ulá-lá, isso é uma mão na roda!

E é mesmo! Abrem-se muitas portas: muitos mashups podem ser feitos, muitas coisas que antes necessitavam de backend podem ser resolvidas apenas na camada de interface, dentro outras – claro, sempre levando em conta questões de segurança, como tomar muito cuidado em como você vai expor seus dados por aí pela web, e tomar extra-care quando se tratar de requisições que podem alterar dados persistidos na sua aplicação.
A essa funcionalidade, de fazer requisições entre servidores, é dado o apelido XDR (X de cross, D de domain, R de request).

O foco desse post, no entanto, não é falar da implementação em si, até porque eu não conseguiri escrever nada melhor do que foi escrito pelo hacks.mozilla, mas sim falar que novamente a Microsoft atrapalha os padrões (aliás, vejam com cuidado esse post no hacks.mozilla: completíssimo, com exemplos de implementação, notas, dicas e poréms).

Os browsers Firefox 3.5 e Safari 4 implementam já essa especificação 2 do XMLHttpRequest, mas o recém-lançado IE8 implementa “uma parte” apenas. E para isso, criaram um novo objeto, o XDomainRequest

Veja um exemplo de como fazer a instanciação correta de um objeto para ser utilizado, que pode fazer XDR:

var url = "http://bar.other/publicNotaries/"
if(XMLHttpRequest) {
var request = new XMLHttpRequest();
if("withCredentials" in request) {
// Firefox 3.5 and Safari 4
request.open('GET', url, true);
request.onreadystatechange = handler;
request.send();
} else if (XDomainRequest) {
// IE8
var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.send();
// handle XDR responses -- not shown here
}
// This version of XHR does not support CORS
// Handle accordingly
}

*nesse código, é usado o atributo withCredentials para verificar se é um objeto que pode fazer o cross-site (ele é específico do CORS)

Agora, note que novamente é preciso fazer uma verificação de qual é o objeto ao qual o browser tem acesso, que nem se faz tradicionalmente, só que dessa vez checando se possui o XDomainRequest ao invés do ActiveXObject(‘Msxml2.XMLHTTP’)

Porque raios a Microsoft não implementa esse objeto na engine do browser e segue um padrão, inclusive definido pela W3C, e facilita a vida? Não vejo um só motivo para continuar com essa coisa de sempre tentar usar um objeto diferente, único e próprio. Ainda mais agora que estão numa campanha pró-adoção do IE8 por parte inclusive dos desenvolvedores…

Posts relacionados

Como pegar dimensões da janela e da barra de rolagem por javascript

Chris — Thu, 27 Aug 2009 16:03:11 +0000

Isso seria efetivamente fácil, se todos os browsers seguissem o padrão da ECMA… mas não é assim que funciona, e ontem um dos meninos que trabalha aqui comigo estava tentando implementar um código javascript que utiliza tanto a altura útil da tela, como a altura visível da janela (window) e a posição das scrollbars.

Papo vai, papo vem, procura na API da Prototype aqui, da jQuery ali, abre o Google acolá… e me deparo com uma página muito completa, que lista os browsers (inclusive por sistema operacional) e qual é o objeto e atributo que está disponível nele.

browser	platform	mode	window.innerWidth window.innerHeight window.pageXOffset window.pageYOffset	document.documentElement.clientWidth document.documentElement.clientHeight document.documentElement.scrollLeft document.documentElement.scrollTop	document.body.clientWidth document.body.clientHeight document.body.scrollLeft document.body.scrollTop
IE	Win32	w. DTD	undef undef undef undef	ok ok ok ok	doc. width doc. height 0 0
IE	Win32	w/o. DTD	undef undef undef undef	0 0 0 0	ok ok ok ok
IE	Mac	all	undef undef undef undef	undef undef undef undef	ok ok ok ok
Firefox	Win32/Mac	w. DTD	+scroller +scroller ok ok	ok ok ok ok	ok doc. height. ok ok
Firefox	Win32/Mac	w/o. DTD	+ scroller +scroller ok ok	doc.width doc.height 0 0	ok ok ok ok
Netscape	Win32	w. DTD	+ scroller +scroller ok ok	ok ok ok ok	ok doc. height. ok ok
Netscape	Win32	w/o. DTD	+ scroller +scroller ok ok	0 0 0 0	ok ok ok ok
Opera	Win32/Mac	all	+ scroller +scroller ok ok	ok doc.height ok ok	ok ok ok ok
Safari	Mac	all	ok ok ok ok	ok doc.height 0 0	ok doc.height ok ok

Ou seja, não existe um método que funcione para todos os browser…

Mas, o autor criou uma implementação cross-browser que funciona para calcular todos esses atributos (altura e largura da janela, posição da scrollbar horizontal e vertical). Fica a dica!

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Segue o link da página, para referência: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html