Question

对于带有图像的容器，使用setInterval和scrollLeft可以很好地使用html按钮。

接下来我想使用键盘箭头键，但似乎当你按箭头键太长时，clearInterval不起作用。

keydown的间隔和持续时间可能会发生变化。只是无法弄清楚原因。任何帮助将非常感激。这是fiddle。

HTML：

<html>
<head>
<title>scrollTo</title>
</head>
<body>
<div class="img-row">
  <div class="img-row-scroller">
    <div class="img-row-inner">
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
    </div>
  </div>
  <div class="scroll-left"></div>
  <div class="scroll-right"></div>
</div>
</body>
</html>

CSS：

.img-row {
    position: relative;
    width: 700px;
    margin: 0 15px 45px 0;
}
.img-row-scroller {
    position: relative;
    width: 100%;
    height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.img-row-inner {
    position: relative;
    width: 100%;
    height: 200px;
}
.img {
    width: 400px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;

}
.scroll-left, .scroll-right {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: aqua;
    top: calc(50% - 40px);
    display: block;
    z-index: 9999;
}
.scroll-left {
    left: 0px;
}
.scroll-right {
    right: 0px;
}

JS：

$(document).ready(function () {
    "use strict";
    var imgRow = $(".img-row-scroller");
    var scrollBtnLeft = $(".scroll-left");
    var scrollBtnRight = $(".scroll-right");
    var timerLeft;
    var timerRight;
    var timerArrowLeft;
    var timerArrowRight;
    var scrollAmount = 12;
    var scrollTime = 20;

    /********** Buttons **********/
    scrollBtnLeft.mousedown(function () {
        timerLeft = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos - scrollAmount);
        }, scrollTime);
    });
    scrollBtnLeft.mouseup(function () {
        clearInterval(timerLeft);
    });
    scrollBtnRight.mousedown(function () {
        timerRight = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos + scrollAmount);
        }, scrollTime);
    });
    scrollBtnRight.mouseup(function () {
        clearInterval(timerRight);
    });
    $(document).mouseup(function () {
        clearInterval(timerLeft);
        clearInterval(timerRight);
    });

    /********** Keys **********/
    $(document).on('keydown', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                //clearInterval(timerArrowLeft);
                timerArrowLeft = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos - scrollAmount);
                }, scrollTime);
                break;

            case 39:
                //clearInterval(timerArrowRight);
                timerArrowRight = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos + scrollAmount);
                    console.log("scrolling");
                }, scrollTime);
                break;

            default:
                return;
        }
        e.preventDefault();
    });

    $(document).on('keyup', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                clearInterval(timerArrowLeft);
                break;

            case 39:
                clearInterval(timerArrowRight);
                console.log("keyup");
                break;

        }
    });

});

Answer 1

好的，我发现了什么是错的。 Keydown重复，与mousedown相反，所以setInterval在使用keydown时设置了不止一次。在重复开始之前需要一段时间，这就是为什么之前的代码在短时间内按下时会起作用的原因。万一有人希望看到：fiddle。无论如何，感谢您阅读。

改进JS：

$(document).ready(function () {
    "use strict";
    var imgRow = $(".img-row-scroller");
    var scrollBtnLeft = $(".scroll-left");
    var scrollBtnRight = $(".scroll-right");
    var timerLeft;
    var timerRight;
    var timerArrowLeft = false;
    var timerArrowRight = false;
    var scrollAmount = 12;
    var scrollTime = 20;

    /********** Buttons **********/
    scrollBtnLeft.mousedown(function () {
        timerLeft = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos - scrollAmount);
        }, scrollTime);
    });
    scrollBtnLeft.mouseup(function () {
        clearInterval(timerLeft);
    });
    scrollBtnRight.mousedown(function () {
        timerRight = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos + scrollAmount);
        }, scrollTime);
    });
    scrollBtnRight.mouseup(function () {
        clearInterval(timerRight);
    });
    $(document).mouseup(function () {
        clearInterval(timerLeft);
        clearInterval(timerRight);
    });

    /********** Keys **********/
    $(document).on('keydown', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                if(timerArrowLeft){
                    return;
                }   
                timerArrowLeft = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos - scrollAmount);
                }, scrollTime);
                break;

            case 39:
                if(timerArrowRight){
                    return;
                }                   
                timerArrowRight = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos + scrollAmount);
                    console.log("scrolling");
                }, scrollTime);
                break;

            default:
                return;
        }
        e.preventDefault();
    });

    $(document).on('keyup', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                clearInterval(timerArrowLeft);
                timerArrowLeft = false;
                break;

            case 39:
                clearInterval(timerArrowRight);
                timerArrowRight = false;
                console.log("keyup");
                break;

            default:
                return;
        }
    });

});

使用箭头键

1 个答案: