0
votes

Comment masquer le bouton avec jQuery

J'essaie de créer un défilement div avec le bouton Cliquez.

Et je veux masquer le bouton s'il était fini de défilement, je veux dire si je ne peux plus faire défiler plus, je veux masquer le bouton. et montrez-le quand il peut faire défiler. P>

Voici ce que j'ai essayé p>

JavaScript: strong> P>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
      <button id="left-button">
        swipe left
      </button>
    </div>
     <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
     </div>
    <div class="right">
    <button id="right-button">
        swipe right
      </button>
    </div>


0 commentaires

3 Réponses :


0
votes

semble que tout ce que vous avez à faire est d'ajouter une touche ou d'afficher un contrôle à vos événements de clic.

Ajouter à la souris sur l'événement P>

  $('#left-button').hide();


0 commentaires

0
votes

Vous manquez de spécificités concernant le bouton que vous essayez de cacher et quelle direction vous essayez de faire défiler. Cette réponse suppose que vous voulez masquer "# bouton droit" et que vous faites défiler la verticale.

Ceci créera un écouteur d'événement pour le défilement, lorsque vous faites défiler le bas et vous atteignez le bas de la page (vous devrez déterminer quoi C'est), il va masquer le bouton droit sinon il le montrera. xxx


0 commentaires

0
votes

Je fixe ceci, c'est ma dernière jQuery basée sur mon Codepen Link

// duration of scroll animation
var scrollDuration = "slow";
// paddles
var leftPaddle = document.getElementsByClassName('left');
var rightPaddle = document.getElementsByClassName('right');
// get items dimensions
var itemsLength = $('.internal').length;
var itemSize = $('.internal').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;

// get wrapper width
var getMenuWrapperSize = function() {
    return $('.center').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
    menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size 
var menuVisibleSize = menuWrapperSize;

// get total width of all menu items
var getMenuSize = function() {
    return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;

// get how much have we scrolled to the left
var getMenuPosition = function() {
    return $('.center').scrollLeft();
};

// finally, what happens when we are actually scrolling the menu
$('.center').on('scroll', function() {

    // get how much of menu is invisible
    menuInvisibleSize = menuSize - menuWrapperSize;
    // get how much have we scrolled so far
    var menuPosition = getMenuPosition();

    var menuEndOffset = menuInvisibleSize - paddleMargin;

    // show & hide the paddles 
    // depending on scroll position
    if (menuPosition <= paddleMargin) {
        $(leftPaddle).addClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition < menuEndOffset) {
        // show both paddles in the middle
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition >= menuEndOffset) {
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).addClass('hidden');
}

    // print important values
    $('#print-wrapper-size span').text(menuWrapperSize);
    $('#print-menu-size span').text(menuSize);
    $('#print-menu-invisible-size span').text(menuInvisibleSize);
    $('#print-menu-position span').text(menuPosition);

});

// scroll to left
$(rightPaddle).on('click', function() {
    $('.center').animate( { scrollLeft: "+=400px"}, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.center').animate( { scrollLeft: "-=400" }, scrollDuration);
});


1 commentaires

Regarde un peu complexe, mais d'accord