单击时在 div 内水平滚动（带按钮）答案

【问题标题】：Scroll horizontally inside div on click (with button)单击时在 div 内水平滚动（带按钮）
【发布时间】：2020-10-18 19:14:51
【问题描述】：

当您按下边缘上的箭头时，我试图弄清楚（在 javascript 中）如何让我的小“幻灯片”水平滚动。问题是：它在一个 div 中，在一个页面上，在那个“外部”div 中，当我们按下箭头时，只有 $('.history-block) div 应该移动。我尝试了 scrollLeft 以及我在互联网上找到的所有其他内容，但没有任何效果。请帮忙：）（css.margin+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>

【问题讨论】：

标签： javascript css button scroll onclick

【解决方案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。

【讨论】：

【解决方案2】：

你只需要像这样在函数scrollleft和scrollright中添加javascript中的scrollLeft属性：

你可以在这个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 的左滚动位置。每次单击左键时，将#outsider div 的左滚动位置递减（-）为function scrollleft()。请注意我是如何添加 function scrollleft() 这样的名称的，这是因为名称 scrollLeft 已被 javascript 占用/占用，这就是为什么我将其命名为 else if writen function scrollLeft() 这样它将不起作用。

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

【讨论】：