javascript - 即时通讯位于滑块末端时如何禁用单击按钮

这是我的代码，如果im位于滑块的末尾，则右键应自动禁用，并且当im处于初始状态时，同样的事情应该发生；如果im位于“ area1”，则左箭头将不起作用，并且如果我在“ 8区”上，那么右箭头不起作用

$('.rightArrow').click(function(event) {
    $('.box').animate({'left' : "-=200px"});
});
$('.leftArrow').click(function() {
    $('.box').animate({'left' : "+=200px"});
});

.mainRow::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
    width: 0px;
    height: 0px;
}
.wrapper {
    position: relative;
}
.mainRow {

    overflow-x: scroll !important;
    border-collapse:separate;
    border-spacing:5px 0px;
}

.box {
    background: red;
    height: 100px;
    min-width: 200px;
    max-width: 200px;
    display: table-cell;
    animation: slideBox .5s;
    animation-fill-mode: forwards;
    position: relative;
}
.arrows {
    position: absolute;
    width: 100%;
    top: 0;
}
.leftArrow {
    position: absolute;
    left: -50px;
    top: 20px;
    font-size: 40px;
}
.rightArrow {
    position: absolute;
    right: -50px;
    top: 20px;
    font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
  <div class="mainRow">
      <div class="box">area 1</div>
      <div class="box">area 2</div>
      <div class="box">area 3</div>
      <div class="box">area 4</div>
      <div class="box">area 5</div>
      <div class="box">area 6</div>
      <div class="box">area 7</div>
      <div class="box">area 8</div>
  </div>
  <div class="arrows">
      <button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
      <button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
  </div>
</div>

最佳答案

固定

如果您打算更改正在使用的幻灯片数量，则可能不是最佳解决方案（但在这种情况下，您将必须计算可能的最大left来检查是否要走得更远）。

在更改位置之前添加position().left的支票：

var truePosition = $('.box').position().left;
$('.rightArrow').click(function(event) {
    if(truePosition > -1415){
        truePosition -= 205;
        $('.box').animate({'left' : "-=205px"});
    }
});
$('.leftArrow').click(function() {
    if(truePosition < 20){
        truePosition += 205;
        $('.box').animate({'left' : "+=205px"});
    }
});

查看jsfiddle上的工作示例

关于javascript - 即时通讯位于滑块末端时如何禁用单击按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45232077/