javascript - 如何在水平 View 表中实现scrollIntoView以供见证-6ren

javascript - 如何在水平 View 表中实现scrollIntoView以供见证

转载作者：行者123 更新时间：2023-12-02 21:45:00

很抱歉，也许标题让您感到困惑，但这正是标题所说的我想使用表格作为基础制作一张证词卡，但我几乎完成了它，但我做不到最后一步，假设我有一个指针，所以当我单击指针时，卡片会滑动到下一张卡片，但我似乎对如何使用 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>

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

最佳答案

是这个吗？

我已经说明了我在样式表中添加和删除的代码。而且整个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>

关于javascript - 如何在水平 View 表中实现scrollIntoView以供见证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60276297/

文章推荐： javascript - 在 D3.js 中使用字典绘制图表

文章推荐： javascript - 如何使用 Angular 8 为对象数组提供不同的日期

java - 自定义 JPA 实现//现有的无 SQL JPA 实现
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
java - 未由 S3FileSystem FileSystem 实现 Hadoop Jar 实现
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
c# - 实现 "Inherit"(实现)通用接口(interface)的接口(interface)？
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
java - 任何 JPA 实现(或更广泛的 Java ORM 实现)是否支持可更新游标
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。允许在行(实体)中进行迭代，并在对当前
generics - 如果我为 B 实现 From ，是否也会为 Vec 实现 From>？
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发

c# - 在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;

OpenVG 实现？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the

performance - 实现 (^)
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0

博弈树的C++实现
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。这是一个好的方法吗？ struct TreeElement{ SomeMoveType

字符串匹配alg的c++实现
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。例子: “贾

图算法的C++实现
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点

Python A* 实现
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-

DHT的C++实现
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。它必须能够将信息发布到 DHT 并检索它。最佳答案 OpenDHT是

C++实现
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？最佳答案 “C++ 实现”是指编译器加上链接

背包分支定界的C++实现
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印

FNV哈希的C#实现
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的

LRU缓存替换策略及C#实现
目录 LRU缓存替换策略核心思想不适用场景算法基本实现算法优化

大角度非迭代的空间坐标旋转C#实现
1. 绪论在前面文章中提到空间直角坐标系相互转换，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系

实现.Net7下的数据库定时检查
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .

查找算法之二分查找的C++实现
二分查找二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。

行者123

个人简介
我是一名优秀的程序员,十分优秀！

作者热门文章

html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？

JMeter 在响应断言中使用 span 标签的问题

html - 在 :hover and :active? 上具有不同效果的 CSS 动画

html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

一款C#编写的神经网络计算图框架

服务器漏洞修复：TLS1.0已启用、HSTS、CSP

程序员如何借势AI提高自己：从高效工作到技能升级的全面指南

海柔仿真系统存储实践：混合云架构下实现高可用与极简运维

用户反馈：信息化项目全部失败，供应商都换了一批了

支持多语言、多商店的商城，.Net7+EF7领域驱动设计架构

postcss-px-to-viewport移动端适配

Mysql高可用架构方案

使用wxpython开发跨平台桌面应用，动态工具的创建处理

在PyCharm中打包Python项目并将其运行到服务器上的方法

首页

博学

6Ren·AI

商城

javascript - 如何在水平 View 表中实现scrollIntoView以供见证