Comment faire défiler vers le bas d'une image sur hover

Question

Salut, je suis juste curieux de connaître la meilleure façon de faire pour être en mesure de faire défiler vers le bas d'une image sur le vol stationnaire. L'image est dans un wrapper avec un débordement caché qui lui est appliqué car c'est assez long. Idéalement, un défilement lisse vers le bas est ce que je cherche à voir le reste de l'image cachée.

J'ai joué avec jquery en essayant de le faire fonctionner mais je me suis embrouillé. Je ne sais pas si je suis sur la bonne voie avec mon code ou pas vraiment.

apprécierais toute aide

$('#image-wrap img').on('hover', function() { 
 
    var target = $(this), 
 
    height = target.height(), 
 
    scrollHeight = target.prop('scrollHeight'); 
 

 
    target.animate({ 
 
    scrollTop: scrollHeight - height 
 
    }, 2000); 
 
});

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    position: relative; 
 
} 
 

 
#image-wrap { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#image-wrap img { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <div id="image-wrap"> 
 
     <img src="http://via.placeholder.com/600x2000" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Je suppose que vous voulez faire défiler la page entière (un peu comme l'utilisation de la molette de la souris)?

Vous pourriez faire quelque chose comme ceci:

$('#image-wrap img').on('hover', function() { 
    var target = $(this), 
    height = target.height(), 
    scrollHeight = target.offset().top; 

    $('body,html').animate({ 
     scrollTop:scrollHeight+height-500 
    },500); 
}); 

Ce serait alors faire défiler la page, la dernière 500px de l'image sont visibles. Si cela ne résout pas votre problème, un exemple avec toute la page serait utile.

Answer 2

Si l'image est cachée, vous ne pouvez pas interagir avec elle. S'il est visible, vous pouvez utiliser scrollTo() comme ceci.

1. capture la position de défilement actuelle à l'aide scrollTop()

   var pos = $ ('contenant votre image') scrollTop().

2. Prenez la hauteur du conteneur d'image

   var height = $ (votre conteneur d'image ') de hauteur().

3. Ajoutez les deux valeurs

   var moveTo = pos + hauteur;

4. Autoscroll à la position

   window.scrollTo (0, moveto);

Answer 3

Je comprends maintenant comment vous le souhaitez.

HTML

$(document).ready(function(){ 
 
    $('#img-holder').mouseenter(function(){ 
 
    var x = $('img').height(); 
 
    x = x-400; 
 
    $('img').animate({'position':'absolute','top':'-'+x}, 300); 
 
    }); 
 
    $('#img-holder').mouseleave(function(){ 
 
    $('img').css({'position':'relative','top':'0'}); 
 
    }); 
 
});

#img-holder{ 
 
    width:100%; 
 
    height:400px; 
 
    border:2px solid; 
 
    overflow:hidden; 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img-holder"> 
 
    <img src="https://blog.hittail.com/wp-content/uploads/sites/8/2013/01/hidden-value-of-long-tail-seo-1000.png" width="100%"> 
 
</div>

L'idée fait la position du img absolu et lui donner une valeur à afficher la partie inférieure.

est ici un travail DEMO

Answer 4

S'il vous plaît essayez ce qui suit:

$('#image-wrap img').hover(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $(this).offset().top + $(this).outerHeight() 
 
    }, 2000); 
 
});

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    position: relative; 
 
} 
 

 
#image-wrap { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#image-wrap img { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <div id="image-wrap"> 
 
     <img src="http://via.placeholder.com/600x2000" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

Vous pouvez simplement utiliser CSS3. Sur hover ajouter la transition transform: translateY(-100%), mais ce n'est pas intelligent comme la solution jquery.

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    transition: all 2000ms ease-out; 
 
} 
 

 
#box:hover img { 
 
    transform: translateY(-100%); 
 
}

<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <img src="http://lorempixel.com/400/1000/sports/" /> 
 
    </div> 
 
    </div> 
 
</div>