Как реализовать scrollIntoView в горизонтальной таблице для показаний

Question

Извините, может быть, название вас смущает, но это именно то, что сказано в заголовке Я хочу сделать карточку свидетельства, используя таблицу на основе , но я почти закончу sh, но я могу ' Чтобы сделать последний штрих, скажем, у меня есть указатель, поэтому, когда я щелкаю указатель, карта перемещается к следующей карте, но мне кажется, что я не совсем понимаю, как реализовать ее, используя javascript. Я догадываюсь, что могу использовать массив child для него и перемещаться в зависимости от индекса, но показания карты по-прежнему не сдвигаются

Я читаю некоторые топи c, но близко к тому, что я хочу это ответ здесь: Прокрутка плавно на 100 пикселей по горизонтали

, но я запутался, как это реализовать.

это мой код:

            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>

Я чувствую, что уже близок к ответу, но не могу понять, как решить эту проблему, может кто-нибудь помочь мне решить эту проблему

Answer 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>

Answer 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>