60
A técnica
O efeito que pode ser visualizado no link colocado na pergunta é comummente conhecido por "Parallax Scrolling".
Parallax
O termo "parallax" refere-se ao movimento aparente dos objetos quando vistos de diferentes posições. A técnica foi originalmente utilizada em jogos de vídeo 2D em imagens de fundo com movidos mais lentos do que imagens de ...
respondida 5/07/14 às 2:18
Zuul
34,8mil1818 medalhas de ouro8686 medalhas de prata180180 medalhas de bronze
41
Para navegadores webkit (Chrome, Safari, Opera 15+):
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /*...
respondida 12/06/15 às 14:17
Chun
7.30033 medalhas de ouro2525 medalhas de prata5555 medalhas de bronze
20
Já usei o superscrollorama para fazer isso. É bem simples de usar.. o próprio exemplo deles é muito intuitivo. Ele usa a biblioteca greensock para trabalhar com a animação que por sinal é fantástica.
O html ficaria assim:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
...
12
Tem como usar o css para mostrar as barras de rolagem.
#divContent{
overflow:auto;
}
Com isso sua div deve ter scroll sempre que precisar.
Existem varias opções para diversos casos.
Veja a definição no site da W3C.
overflow: visible|hidden|scroll|auto|initial|inherit;
Para deixar isso apenas para dispositivos mobile, você pode usar MediaQuery, para ...
11
Por passos, o que precisa fazer é:
saber a posição do elemento que pretende na página para poder comparar com o valor do scroll num dado momento.
ter um oscultador de evento que mede a quantidade atual scroll a cada momento do scroll
comparar o scroll atual com a posicao inicial do objeto e agir segundo uma condição if
Um exemplo que fiz para outra ...
respondida 19/11/14 às 19:00
8
Pode usar assim para fazer o scrol:
$('#wrap').animate({ // unsando o jQuery animate para animar o scroll
scrollTop: $('#wrap ul').height() // fazer scroll para a posição correspondente à altura do 'ul', o que é o mesmo que dizer scroll até ao fundo
}, 500); // velocidade do scroll em ...
respondida 23/02/14 às 19:05
6
$(function() {
$("#add").click(function() {
$("#wrap ul").append('<li class="new">Teste</li>');
$("li.new").slideDown('slow', 'easeOutBounce');
$("#wrap").animate({scrollTop: $('#wrap').prop("scrollHeight")}, 500);
});
});
jsfiddle
Referência: Append content to div and scroll/animate to bottom
Achei a resposta ...
respondida 23/02/14 às 19:18
Miguel Angelo
28,3mil33 medalhas de ouro7373 medalhas de prata112112 medalhas de bronze
5
Você precisa de ter no menu alguma indicação do alvo para o scroll.
Pode ser o id do elemento guardado numa propriedade data, um href/ancora ou outro. Se usar uma ancora (<a>) pode precisar de usar o .preventDefault() para impedir o link de ser seguido (nalguns casos quer mesmo que o link fique no url, então não deve usar).
Depois tem de interceptar ...
respondida 26/05/14 às 18:31
5
Existe um método muito simples, descobri no braço mesmo, simplesmente usando CSS, sem Js.
Coloque na sua folha de estilo:
/* Largura da barra de rolagem */
::-webkit-scrollbar {
width: 0px;
}
Pronto :D
5
Tente usar o scrollHeight, que é uma propriedade apenas leitura que dá a medida do conteúdo do elemento:
var div = $('#div')[0];
div.scrollTop = div.scrollHeight;
Fonte e Fiddle.
Usando apenas jQuery:
var div = $('#div');
div.prop("scrollTop", div.prop("scrollHeight"));
Fiddle.
4
Para desativar a barra você usa o CSS sem segredo, como já deve ter tentando com o overflow-x: hidden;. O jQuery faz apenas a página ser rolável. Para tal, você pode usar o plugin mousewheel para emular a rolagem (nesse caso, apenas com o middle button). Para poder usar os botões direcionais e o pgdn, pgup, home e end, precisaria usar o eventos keydown e/ou ...
4
Pode se usar uma animação de vários frames e imagens,isso não seria muito eficiente em termos de utilização de internet,mas poderia determinar qual frame deve ser o atual com a relação scroll atual da página document.body.scrollTop com o tamanho total document.body.scrollHeight.
Calculando a porcentagem atual,poderia ser criado animações usando apenas ...
respondida 5/07/14 às 3:04
Weslley C X Sardinha
1.41911 medalhas de ouro99 medalhas de prata2525 medalhas de bronze
4
Sim é possível, existem maneiras diferentes, uma delas é usando JavaScript/jQuery para saber as dimensões e posição do elemento para poder sincronizar o scroll com esses valores.
Se usar .offset() pode saber onde o elemento começa e somando-lhe o .outerHeight() sabe onde ele acaba. Depois precisa saber o valor do scroll e isso pode obter com .scroll(). Para ...
respondida 15/12/14 às 22:14
4
Para fazer a troca do scroll automático, você pode fazer da seguinte forma:
$(document).ready(function(){
var msg = $("#msg");
$("#send_msg").click(function(){
if(msg.val().length >= 1){
$("#list_msg").append("<li>"+msg.val()+"</li>")
msg.val("").focus();
}
// verifica se o scroll ...
respondida 14/01/15 às 13:44
4
Basta alterar esse trecho do seu código:
$(this).click(function () {
if($(window).width() > 760){
$('html, body').animate({scrollTop: targetOffset}, 300);
return false;
}
});
Exemplo
Precisei colocar o código no JSFiddle porque não funciona como deveria no snippet do StackOverflow. Para reproduzir, basta diminuir o quadro de result ...
respondida 24/02/15 às 20:14
Renan Gomes
18,7mil88 medalhas de ouro4141 medalhas de prata102102 medalhas de bronze
4
O código funciona bem e não vejo como otimizá-lo se o objetivo for detectar o sentido do rolamento a cada passo (ou seja, em todo evento scroll, que é disparado múltiplas vezes enquanto o conteúdo é rolado).
Mas dá para otimizar se o objetivo for detectar o sentido "resultante" do rolamento – quando o que importa é se no final do rolamento o conteúdo está ...
respondida 2/04/15 às 18:01
4
Podes usar o Range Input como uma scrollbar personalizada
Podes ler mais sobre isto em: JQuery Tools Rangeinput (fonte do código abaixo)
Exemplo no jsFiddle: http://jsfiddle.net/qw75wgeg
// get handle to the scrollable DIV
var scroll = $("#scroll");
// initialize rangeinput
$(":range").rangeinput({
// slide the DIV along with the range ...
respondida 24/06/15 às 6:30
Chun
7.30033 medalhas de ouro2525 medalhas de prata5555 medalhas de bronze
4
@Ghabriel você pode começar escultando o evento scroll da janela.
window.addEventListener('scroll', function(ev){
});
E dentro do evento você pode verificar pelo valor da variavel scrollY e com base nele esconder ou mostrar sua div.
if (window.scrollY > 200){
document.getElementsByTagName("nav").style.display="none";
} else {
document....
4
Imagino que queira algo como isto:
O cálculo da opacidade equivale a:
opacidade = valorInicial * (1 - scrollTop / 100vh)
Sendo o 100vh representado pelo $(window).height().
Javascript:
$(document).on('scroll', function(){
var max = 0.7; //Valor inicial, que também deve ser ajustado no css
var opacity = max * (1 - $(this).scrollTop() / $(window)....
respondida 21/10/16 às 13:03
Samir Braga
9.93855 medalhas de ouro2424 medalhas de prata4949 medalhas de bronze
4
Para navegadores webkit (Chrome, Safari, Opera 15+):
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-...
4
Você pode fazer desta maneira
$("input").click(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 500);
});
Fonte: stackoverflow em inglês
Veja:
$(function(){
$("[data-toggle='bottom']").click(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
});
});
div{
width:300px;
...
4
Você pode ir rolando a tela "de tantos em tantos" pixels, até chegar no topo:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function() {
$('html, ...
respondida 4/10/18 às 16:20
Ricardo Pontual
17,3mil11 medalhas de ouro2121 medalhas de prata4949 medalhas de bronze
4
Isso não remove o scroll, ele oculta, se for para remover o certo seria aplicar direto no elementos:
html, body {
overflow-x: hidden;
}
Aplicamos em ambos porque no Chrome e no Firefox geralmente é (ou era) diferente o elemento que possui o scrollbar padrão
Devo ressaltar, se tem um scrollbar horizontal que não devia existir é porque tem um elemento que ...
respondida 30/06/20 às 3:17
3
Já consegui..
De qualquer forma fica aqui, pode alguem necessitar.
var posts;
window.addEvent('domready', function(){
posts = $$('.post');
})
window.addEvent('scroll', function(e){
var altura = window.getScroll().y;
posts.each(function (post) {
if (post.getPosition().y > altura + 400) return;
post.fade('in');
});
});
...
3
Utilize offset para achar a posição do objeto
$("#meuobjeto_id").offset().top
E compare o $(window).scrollTop() com o valor obtido. Você pode fazer algo tipo
$(window).scroll(function(){
if ($("#meuobjeto_id").offset().top > $(window).scrollTop()){
// animar
}
});
3
Eu fiz um exemplo funcional no jsFiddle, também coloquei comentários que ajudam a compreender a lógica .
http://jsfiddle.net/M4gQG/1/
Lembrando que no desktop funciona com o duplo clique e em dispositivos mobile em geral, funciona com um toque, ele também permite rolagem no touchscreen.
3
João, a página que indicou usa jQuery. Fazer isso com javascript simples é muito trabalhoso. Se puder usar jQuery então a resposta que o @bfavaretto indicou é a resposta ao seu problema. Se usar outra biblioteca diga qual que tentamos ajudar.
Mas se quiser usar só javascript, pode fazer isso com CSS:
Se criar um wrapper (div exterior) que tem uma outra div ...
respondida 6/07/14 às 9:59
3
Se não precisas de saber se está parado então podes optimizar removendo o ultimo else e deixar somente:
if (scrollAmt > lastScrollTop) {
// baixo
}
else if (scrollAmt < lastScrollTop) {
// cima
}
e a minha resposta termina aqui.
Se precisas da funcionalidade de "parado" continua a ler :)
A funcionalidade de "parado" não funciona ...
respondida 2/04/15 às 18:25
3
Você pode fazer assim:
$('#div').animate({scrollTop: $('#div')[0].scrollHeight}, 500);
Pen: http://codepen.io/raftelti/pen/EVxQXL
3
Bom. Você não passou nenhum código, então eu criei esse rápido exemplo. Vê se resolve a sua situação.
div {
width: 500px;
height: 100px;
overflow: scroll;
box-shadow: inset -30px -30px 30px 0px #000;
}
table {
width: 400px;
height: 100px;
}
<div>
<table>
<tr>
<td>UIAHBUIABHAUIBAIUIABAUI</...
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
rolamento × 179javascript × 75
jquery × 67
css × 48
html × 43
div × 12
android × 10
php × 9
ajax × 6
css3 × 6
wordpress × 5
listview × 5
table × 5
menu × 5
jquery-animate × 5
iframe × 4
html5 × 3
android-studio × 3
mobile × 3
bootstrap × 3
modal × 3
google-chrome × 3
javascript-eventos × 3
nav-bar × 3
java × 2