如何在水平视图表中实现scrollIntoView作证答案

【问题标题】：How to Implement scrollIntoView in a horizontal view table for testimony如何在水平视图表中实现scrollIntoView作证
【发布时间】：2020-02-18 08:02:55
【问题描述】：

对不起，也许标题让你感到困惑，但这正是标题所说的我想以表格为基础制作见证卡，但我几乎完成了但我做不到最后一点，假设我有一个指针，所以当我单击指针时，卡片将滑动到下一张卡片，但似乎我对如何使用 javascript 实现它感到困惑。我有一种预感，我可以使用子数组并根据索引移动，但卡片证词仍然不会移动

我阅读了一些主题，但我想要的答案在这里：Scroll smoothly by 100px horizontally

但我对如何实现它感到困惑。

这是我的代码：

            var slideIndex = 1;
            showSlides(slideIndex);

            // Thumbnail image controls
            function currentTestimony(n) {
                showSlides(slideIndex = n);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("slider-item");
                var pointers = document.getElementsByClassName("pointer");
                if (n > slides.length) {
                    slideIndex = 1
                }

                if (n < 1) {
                    slideIndex = slides.length
                }
                
//                for (i = 0; i < slides.length; i++) {
//                    slides[i].getElementsById('testimony-3').scrollIntoView()
//                }

                for (i = 0; i < pointers.length; i++) {
                    pointers[i].className = pointers[i].className.replace(" active", "");
                }

                pointers[slideIndex-1].className += " active";
            }

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

#dark-slider-testimonial .card{
    background-color: #f5f7fb;
    border-radius: 20px;
    width: 380px;
    height: 380px;
    margin: 0% 32px;
    padding: 20px;
    display: inline-table;
}

/* 
    ===================================================================
    First Table
    ===================================================================
*/
#dark-slider-testimonial {
    border-radius: 20px;
    margin: 20px auto;
    padding: 5%;
    width: 100%;
    scroll-behavior: smooth;
}

#dark-slider-testimonial .container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#dark-slider-testimonial .container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#dark-slider-testimonial table {
    font-family: 'Nunito', sans-serif;
    width: 100%;
    font-size: 0.8em;
    color: #1d3962;
    border: none;
    border-top: none;
}

#dark-slider-testimonial tr{
    text-align: left;
}

#dark-slider-testimonial td{
    text-align: left;
    scroll-snap-align: start;
}

#dark-slider-testimonial .testimony-name{
    font-size: 1.6em;
    font-weight: bold;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-title{
    font-size: 1.4em;
    font-weight: bold;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-subtitle{
    font-size: 1.2em;
    font-weight: normal;
    color: #7E94B3;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-desc{
    font-size: 1.2em;
    font-weight: normal;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .pointer {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
    background-color: #3b73c5;
}

        <div id="dark-slider-testimonial">
            <div>
                <div class="container">
                    <table>
                        <tr>
                            <td id="testimony-1" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-2" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-3" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-4" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-5" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- The pointers/circles -->
                <div style="text-align:center">
                    <span class="pointer" onclick="currentTestimony(1)"></span>
                    <span class="pointer" onclick="currentTestimony(2)"></span>
                    <span class="pointer" onclick="currentTestimony(3)"></span>
                    <span class="pointer" onclick="currentTestimony(4)"></span>
                    <span class="pointer" onclick="currentTestimony(5)"></span>
                </div>
            </div>
        </div>

我觉得我已经接近答案但我不太知道如何解决这个问题，有人可以帮我解决这个问题吗？

【问题讨论】：

您希望一次只显示 1 个证词？然后用指针滑动它们？
@MosiaThabo 感谢您的回复，不仅 1 我想显示其余的证词，而且 n-1 ，也许是正确的表达方式“我希望我点击或选择的证词出现在左侧“所以它像这样n，n+1，n+2，但只有n-i不会出现，你可以试试，但将卡片向右滑动1次，这就是我想用指针
好的，我现在明白了。让我快速看看

标签： javascript html css

【解决方案1】：

这是它吗？

我已经说明了我在您的样式表中添加和删除的代码。整个 Javascript 也发生了变化。但这一切都是直截了当的。

var PositionPerIndex = {
  "1": "0",
  "2": "-20%",
  "3": "-40%",
  "4": "-60%",
  "5": "-80%"
};

document.querySelectorAll(".pointer").forEach(
  function(pointer){
    pointer.addEventListener('click', 
      function(){
        document.getElementById("content").style.left = PositionPerIndex[this.getAttribute("data-index")];
      }
    );
  }
);

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

#dark-slider-testimonial .card{
    background-color: #f5f7fb;
    border-radius: 20px;
    width: 380px;
    height: 380px;
    margin: 0% 32px;
    padding: 20px;
    display: inline-table;
}

/* 
    ===================================================================
    First Table
    ===================================================================
*/
#dark-slider-testimonial {
    border-radius: 20px;
    margin: 20px auto;
    padding: 5%;
    width: 100%;
    /* START Removed 
        scroll-behavior: smooth;
       END
     */
     
    /* START Added */
    box-sizing: border-box;
    overflow: hidden;
}

#dark-slider-testimonial .container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    /* START Removed 
        overflow-x: auto;
        scroll-snap-type: x mandatory;
       END
     */
     
    /* START Added */
    overflow: hidden;
}

#dark-slider-testimonial .container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#dark-slider-testimonial table {
    font-family: 'Nunito', sans-serif;
    width: 100%;
    overflow: hidden;
    font-size: 0.8em;
    color: #1d3962;
    border: none;
    border-top: none;
}

#dark-slider-testimonial tr{
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    
    /* Added this */
    width: 100%;
    position: relative;
    left: 0%;
    transition: left .5s ease;
}

#dark-slider-testimonial td{
    text-align: left;
    scroll-snap-align: start;
    
    /* Added this */
    flex-basis: 20%;
}

#dark-slider-testimonial .testimony-name{
    font-size: 1.6em;
    font-weight: bold;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-title{
    font-size: 1.4em;
    font-weight: bold;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-subtitle{
    font-size: 1.2em;
    font-weight: normal;
    color: #7E94B3;
    line-height: 1.7em;
}

#dark-slider-testimonial .testimony-desc{
    font-size: 1.2em;
    font-weight: normal;
    color: #1D3962;
    line-height: 1.7em;
}

#dark-slider-testimonial .pointer {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
    background-color: #3b73c5;
}

<div id="dark-slider-testimonial">
            <div>
                <div class="container">
                    <table>
                        <tr id="content">
                            <td id="testimony-1" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-2" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-3" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-4" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>

                            <td id="testimony-5" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- The pointers/circles -->
                <div style="text-align:center">
                    <span class="pointer" data-index="1"></span>
                    <span class="pointer" data-index="2"></span>
                    <span class="pointer" data-index="3"></span>
                    <span class="pointer" data-index="4"></span>
                    <span class="pointer" data-index="5"></span>
                </div>
            </div>
        </div>

【讨论】：

哇，谢谢，是的，就像你在上面做的一样，你真的把我救到这里了，再次谢谢你。但是我可以问一些问题吗？首先，如果我有超过 5 张卡怎么办？我必须先定义位置吗？有什么办法让它更有活力吗？
让我再做一个更通用的答案，需要 n 张卡片。

【解决方案2】：

这是一个更通用的答案，适用于固定尺寸。您可以将大小更改为百分比，以使其适用于不同的屏幕尺寸。

我已经在 VS Code 上解决了这个问题。您只需复制粘贴即可运行。

   <!DOCTYPE html>
   <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
            }

            .main-container {
                width: 100%;
                max-width: 1200px;
                overflow: hidden;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            table.card-space{
                width: 100%;
                height: auto;
                min-height: 400px;
                position: relative;
                white-space: nowrap;
                margin: 0;
                padding: 0;
            }

            tr.card-space_container{
                width: 100%;
                left: 0; /* Initial Position */
                position: relative;

                /* Make a Smooth Left Transition */
                transition: left .5s ease;
                padding: 15px;
                margin: 0;
                padding: 0;
            }

            td.card{
                box-sizing: border-box;
                margin: 0;
                width: 400px;
                min-height: 390px;
                margin: 0;
                position: relative;
            }

            .card-space .card .content{
                width: 400px;
                min-height: 100%;
                background-color: #f5f5f5;
                min-height: 390px;
                padding: 15px;
            }

            .pointer-space{
                text-align: center;

                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }

            .pointer-space .pointer {
                cursor: pointer;
                height: 15px;
                width: 15px;
                margin: 0 2px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.6s ease;
            }

            .pointer-space .pointer:hover {
                background-color: #3b73c5;
            }

        </style>
    </head>
    <body>
        <div class="main-container">
            <table class="card-space">
                <tr class="card-space_container" id="card-space_container">
                    <td class="card">
                        <div class="content">
                            <h1>Card1</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card2</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card3</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card4</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card5</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card6</h1>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- The pointers/circles -->
        <div class="pointer-space">
        <span class="pointer" data-index="0"></span>
        <span class="pointer" data-index="1"></span>
        <span class="pointer" data-index="2"></span>
        <span class="pointer" data-index="3"></span>
        <span class="pointer" data-index="4"></span>
        <span class="pointer" data-index="5"></span>
        </div>

        <script>
        (function(){
            // Get all the Pointers
            var PointerList = document.querySelectorAll(".pointer");

            //  Get the Card container
            var container = document.getElementById("card-space_container");

            PointerList.forEach(function(pointer){
                pointer.addEventListener('click', function(){

                    //  First get the index represented by each pointer
                    var i = this.getAttribute('data-index');

                    //  Summary:
                    //      Then Calculate the position to which card-space_container must be set.
                    //  examples:   
                    //      -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
                    //      -If the pointer return index as 1, then 1  x -400 = -400%;
                    //      - etc...
                    container.style.left = (i * (-400)).toString().concat('px');
                });
            });
        })();
        </script>
    </body>
    </html>

【讨论】：