单击时在div内水平滚动(带按钮)

Question

我正在试图弄清楚(在javascript中)当你按下边缘的箭头时，如何让我的小“幻灯片”水平滚动。问题是:它在一个div中，在一个页面上，在那个“外部”div中，当我们按下箭头时，只有$('.history-block) div应该移动。我尝试了scrollLeft和我在互联网上找到的所有其他东西，但都不起作用。请帮助:) (css.edge+10-10有效，但这不是我想要的)

https://codepen.io/Rizsoo/pen/OJXXRwQ

​

#outsider {
    height: 100vh;
    max-height: 1000px;
    width: 100%;
    overflow: scroll;
    position: relative;
    white-space: nowrap;
    overflow-x: scroll;
    display: inline-block;
    box-shadow: 20px 0 20px 0 grey;
}

@keyframes timeline {
    0% {
        right: 0px;
    }

    100% {
        right: 1000px;
    }
}

#outsider:hover {
    animation-play-state: paused;
}

#insider {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
}

.history-block {
    height: 100%;
    min-width: 300px;
    width: 10vw;
    margin: 0 -2px;
    display: inline-block;
    font-family: 'roboto condensed', sans-serif;
    font-size: 60px;
    font-weight: 100;
    color: #FFF;
    box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.8);
    transition: width 0.2s;
}

.year {
    position: absolute;
    top: 0px;
    font-size: 70%;
    font-weight: bold;
    margin: 30px 30px;
    background-color: black;
    padding: 5px 15px 5px 15px;
}

.title {
    position: absolute;
    display: block;
    width: 250px;
    top: 65px;
    font-size: 15px;
    margin: 30px;
    white-space: normal;
    transition: width 0.2s;
    background-color: black;
    padding: 5px;
    line-height: 135%;
}

/* BUTTONS !!!!!!!!!!!!! */
#button-left,
#button-right {
    position: absolute;
    align-items: center;
    align-content: center;
    vertical-align: middle;
    justify-content: center;
    display: flex;
    align-items: center;
    z-index: 1000;
    color: black;
    height: 100vh;
    max-height: 1000px;
    width: 50px;
    background-color: white;
    opacity: 0.5;
}

#button-left {
    left: 0;
    color: black;
}

#button-right {
    right: 0;
}

#button-right:hover {
    opacity: 0.7;
}

#button-left:hover {
    opacity: 0.7;
}

/* IMAGES BCG !!!!!!*/
.bg-1993 {
    background: rebeccapurple;
    background-size: cover;
    background-position: center;
}

.bg-1994 {
    background: tan;
    background-size: cover;
    background-position: center;
}

.bg-1995 {
    background: aqua;
    background-size: cover;
    background-position: center;
}

.bg-1996 {
    background: black;
    background-size: cover;
    background-position: center;
}

.bg-1997 {
    background: yellow;
    background-size: cover;
    background-position: center;
}

.bg-1998 {
    background: yellow;
    background-size: cover;
    background-position: center;
}

.bg-1999 {
    background: wheat;
    background-size: cover;
    background-position: center;
}

.bg-2000 {
    background: lightcoral;
    background-size: cover;
    background-position: bottom;
}

.bg-2001 {
    background: palegreen;
    background-size: cover;
    background-position: bottom;
}

<section id="sec-3">

    <div id="button-left" onClick={()scroll(-20)}>
        <ion-icon name="chevron-back-outline" style="height: 40px; width: 40px;"></ion-icon>
    </div>
    <div id="button-right" onclick="scrollright()">
        <ion-icon name="chevron-forward-outline" style="height: 40px; width: 40px;"></ion-icon>
    </div>
    <div id="outsider">
        <div id="insider">
            <div class="history-block bg-1993">
                <div class="year">1993</div>
                <div class="title"> I. Tyrolia Kupa: 1993. február 13. <br>Semmering - Ausztria<br> A legelső
                    verseny.</div>
            </div>
            <div class="history-block bg-1994">
                <div class="year">1994</div>
                <div class="title">II. Tyrolia Kupa: 1994. február 27.<br>Semmering - Ausztria</div>
            </div>
            <div class="history-block bg-1995">
                <div class="year">1995</div>
                <div class="title">III. Tyrolia Kupa: 1995. február 25.<br>Semmering - Ausztria</div>
            </div>
            <div class="history-block bg-1996">
                <div class="year">1996</div>
                <div class="title">IV. Tyrolia Kupa: 1996. február 24.<br>Semmering - Ausztria</div>
            </div>
            <div class="history-block bg-1997">
                <div class="year">1997</div>
                <div class="title">V. Tyrolia Kupa: 1997. február 22.<br>Semmering - Ausztria</div>
            </div>
            <div class="history-block bg-1998">
                <div class="year">1998</div>
                <div class="title">VI. Tyrolia Kupa: 1998. március 28.<br>Semmering - Ausztria</div>
            </div>
            <div class="history-block bg-1999">
                <div class="year">1999</div>
                <div class="title">VII. Tyrolia Kupa: 1999. február 19.<br>Semmering - Ausztria <br>Különvonat
                    Budapestről. Körülbelül 700 rajtoló.</div>
            </div>
            <div class="history-block bg-2000">
                <div class="year">2000</div>
                <div class="title">I. Volvo Kupa: 2000. február 17.<br>Semmering - Ausztria <br>Az első Volvo kupa
                </div>
            </div>
            <div class="history-block bg-2001">
                <div class="year">2001</div>
                <div class="title">II. Volvo Kupa: 2001. február 17.<br>Semmering - Ausztria</div>
            </div>
        </div>
    </div>
</section>

​

Answer 1

(请注意CSS第一行的拼写错误：outsider而不是#outsider)

使用Element.scrollBy()方法。下面是它在代码中的样子：

https://codepen.io/genechk/pen/oNLLYGp

const outsider = document.getElementById('outsider');
const distance = 200;

function scrollLft() {
  outsider.scrollBy({
    left: -distance,
    behavior: 'smooth'
  });
}

function scrollRight() {
  outsider.scrollBy({
    left: distance,
    behavior: 'smooth'
  });
}

HTML：

<div id="button-left" onclick="scrollLft()">...</div>
<div id="button-right" onclick="scrollRight()">...</div>

如果您出于某种原因(即最大化浏览器支持)而致力于使用jQuery，我建议您使用Slick。

Answer 2

您只需在javascript中添加scrollLeft属性，如下所示，在函数scrollleft和scrollright中：

你可以在这个link中获得完整的结果

HTML:
<div id="button-left" onclick="scrollleft()">...</div>
<div id="button-right" onclick="scrollright()">...</div>

JS:
var btnRight = document.querySelector("#button-right");
var mainDiv = document.querySelector("#outsider")

function scrollright() {
   mainDiv.scrollLeft += 900;
}

function scrollleft() {
   mainDiv.scrollLeft -= 900;
}

对于function scrollright()，您需要在每次单击右键时递增(+) #outsider div的左侧滚动位置。并在每次点击左按钮时递减(-) function scrollleft()的#outsider div的左滚动位置。注意我是如何像那样添加function scrollleft()的名称的，这是因为名称scrollLeft被javascript采用/占据，这就是为什么我这样命名它，否则如果像这样写function scrollLeft()它就不会工作。

您还可以将scroll-behavior: smooth;添加到#outsider css代码中，使其滚动更加流畅。