Question

我试图通过单击按钮创建滚动div。

，如果滚动结束，我想隐藏按钮，我的意思是如果我无法滚动了，那么我想隐藏按钮。并在它可以滚动时显示它。

这是我尝试过的

Javascript：

   $('#right-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        scrollLeft: "+=300px"
      }, "slow");
   });
   
     $('#left-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        scrollLeft: "-=300px"
      }, "slow");
 });

.left{
 float: left; 
 width: 30%;
 height: 200px;
 border: 1px solid black;
}

.internal{
 width: 31.75%;
 height: 100%;
 border: 1px solid black;
 display: inline-block;
}

.center{
 float: left; 
 width: 38.9%;
 height: 200px;
 border: 1px solid black;
 margin: 1px;
 overflow: hidden;
 /*will change this to hidden later to deny scolling to user*/
 white-space: nowrap;
}

.right{
 float: right; 
 width: 30%;
 height: 200px;
 border: 1px solid black;
}

<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>

我在这里找到了好的，但是我不知道如何修改它。codepen

Answer 1

似乎您需要做的就是向点击事件添加隐藏或显示控件。

添加到右键单击事件

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

添加到左键单击事件

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

，然后设置页面加载时的默认行为以显示按钮的启动状态，例如

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

Answer 2

您缺少有关要隐藏的按钮以及要滚动的方向的详细信息。这个答案是假设您要隐藏“＃right-button”并且您正在垂直滚动。

这将创建一个用于滚动的事件侦听器，当您滚动并到达页面底部时（需要确定是什么），它将隐藏右键，否则将显示它。

$(window).scroll( function() {
    if($(window).scrollTop() + $(window).height() === 5158){
//  if($(window).scrollTop() + $(window).height() === buttomOfPage){
        $('#right-button').hide()
    } else {
        $('#right-button').show()
    }
})

Answer 3

我解决了这个问题，这是我基于codepen链接的最后一个jQuery

// 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);
});

如何用jQuery隐藏按钮

3 个答案: