L'utilisation de deux boutons (images) pour faire défiler une DIV qui est fixé à " overflow: hidden; avec jQuery

j'ai un div conteneur:

.mask { 
    height: 157px;
    overflow: hidden;
}

le contenu à l'intérieur de ce conteneur est plus que 157px. j'ai deux liens (images) que je veux utiliser pour faire défiler le contenu à l'intérieur du conteneur vers le haut ou vers le bas:

<ul class="scroll">
<li><a href="#"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
<li><a href="#"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>

comment puis-je obtenir ces deux liens pour faire défiler le contenu de l'intérieur du conteneur?

merci beaucoup

===========================================

Merci pour votre aide. Il s'avère que cela fonctionne mieux à l'aide de la scrollTo Plugin (http://plugins.jquery.com/project/ScrollTo).

$(document).ready(function(){ 
    $(".down").click(function () {
        $('.mask').scrollTo( '+=156px', 500 );;
    });

    $(".up").click(function () {
        $('.mask').scrollTo( '-=156px', 500 );;
    });
});

OriginalL'auteur maze | 2011-06-28

  1. 2

    Si vous souhaitez utiliser onmouseover et onmouseout événement vous pouvez utiliser quelque chose comme ça :

    onmouseover :

    function scrollUp(){
  document.getElementById('scroll-pane').scrollTop -= 15; //vertical scroll increments
  timerScrollUp = setTimeout('scrollUp()',10);
}

    et onmouseout vous effacer la minuterie :

    clearTimeout(timerScrollUp);

    OriginalL'auteur Tim

  2. 1

    Voici un code qui fonctionne 🙂 Vous aurez besoin d'ajouter un peu de style à prévenir les boutons de déplacement trop. Ajouter le "fixe" de position pour les boutons.

    Essentialyl ce qui se passe ici est que le contenu est déplacé vers le haut/vers le bas dans/hors du récipient, faire apparaître à défiler. Tandis que les boutons eux-mêmes, sont intactes!

    Espère que c'est de l'utiliser 🙂

    <div class="mask">
<div id="mover">
Content Here
</div>
<ul class="scroll">
    <li><a href="#" class="down"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
    <li><a href="#" class="up"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>
</div>

<script type="text/javascript">
    $(".down").click(function () {
        $("#mover").animate({marginTop: '-=20px'}, 0);
    });

    $(".up").click(function () {
        $("#mover").animate({ marginTop: '+=20px' }, 0);
    });
</script>

<style>
.mask { 
    height: 157px;
    overflow: hidden;
}

.scroll
{
    float: right;
}
</style>

    OriginalL'auteur Chris

  3. 0

    Vous pouvez consulter ces exemples pour apprendre à mettre en œuvre ou de l'utiliser directement pour obtenir la tâche accomplie:

    1- HoverScroll plugin jQuery

    2- jCarousel

    3- Lisse De Défilement Div

    OriginalL'auteur Mohammed Swillam