Question

我有一个正在使用jQuery的滚动导航。

$('#btn-nav-month-previous').click(function() {
  $(".inner-box-month").animate({
    scrollLeft: "-=200px"
  }, "fast");
});

$('#btn-nav-month-next').click(function() {
  $(".inner-box-month").animate({
    scrollLeft: "+=200px"
  }, "fast");
});

/*month*/

.container-month {
  width: 870px;
  margin: 0 auto;
  overflow: hidden;
}

nav#container-month {
  position: relative;
  width: 100%;
}

#btn-nav-month-previous {
  cursor: pointer;
  float: left;
  margin: 5px;
  width: 10;
  height: 0;
  border-right: 28px solid #103252;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-top: 1.2%;
}

#btn-nav-month-next {
  cursor: pointer;
  float: right;
  margin: 5px;
  width: 10;
  height: 0;
  border-left: 28px solid #103252;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-top: 1.2%;
}

.inner-box-month {
  width: 76%;
  white-space: nowrap;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.data-month {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: block;
  text-align: center;
}

.item-month {
  padding: 2px 30px;
  color: #000;
  display: inline-block;
  margin: 2px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  white-space: no-wrap;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: #cecece;
  cursor: pointer;
}

.item-month:hover {
  background-color: #5fdba7;
  color: white;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: #5fdba7;
}

@media only screen and (max-width: 480px) {
  #btn-nav-month-previous {
    display: none;
  }
  #btn-nav-month-next {
    display: none;
  }
  .inner-box-month {
    width: 100%;
    overflow-x: auto;
  }
}


/*month end*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-month">
  <nav id="container-month">
    <div id="btn-nav-month-previous"></div>
    <div id="btn-nav-month-next"></div>
    <div class="inner-box-month">
      <div class="data-month">
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
        <div class="days item-month"><span data-value="2019-10-23">23<br>Wed</span></div>
      </div>
    </div>
  </nav>
</div>

我希望在没有更多内容可以滚动（向右）时，箭头将类更改为display:none。如果我在开头，则向左箭头转到display: none。

如何在jQuery中定义没有更多元素可以滚动？

Answer 1

赞：

function checkScroll() {
  // Get current scroll position
  var scrollLeftPosition = $('.inner-box-month').scrollLeft();
  // Calculate max scroll position
  var maximumScroll = $('.inner-box-month').prop('scrollWidth') - 
                      $('.inner-box-month')[0].offsetWidth;
  // Make sure they show unless the if statement passes below
  $('#btn-nav-month-previous, #btn-nav-month-next').show();
  if ( ( scrollLeftPosition === 0 ) || 
       ( scrollLeftPosition === maximumScroll ) ) { 
    $(this).hide();
  }
}
$('#btn-nav-month-previous').hide() // initial state
  .click(function() {
      $(".inner-box-month").animate(
      {scrollLeft: "-=200px"}, 
      "fast", 
      checkScroll.bind(this)
    );
});

$('#btn-nav-month-next').click(function() {
    $(".inner-box-month").animate(
      {scrollLeft: "+=200px"}, 
      "fast", 
      checkScroll.bind(this)
  );
});

https://jsfiddle.net/bgv47kdL/4/

您可能希望设置visibility: hidden而不是display: none，以便空格保持不变。

jQuery水平滚动隐藏箭头（如果没有更多元素）

1 个答案: