全屏滚动表格

原创 已于 2025-06-27 13:33:13 修改 · 214 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html

于 2025-06-05 16:12:08 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏滚动表格</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            overflow: hidden;
            background-color: #f5f5f5;
        }
        
        .table-container {
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            position: absolute;
            top: 0;
            left: 0;
            animation: scroll 30s linear infinite;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #4CAF50;
            color: white;
            position: sticky;
            top: 0;
        }
        
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        tr:hover {
            background-color: #ddd;
        }
        
        @keyframes scroll {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(calc(-100% + 100vh));
            }
        }
        
        .footer {
            position: fixed;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: #666;
        }
        
        /* 插入的网址样式 */
        .website-link {
            color: #4CAF50;
            text-decoration: none;
            font-weight: bold;
        }
        
        .website-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                    <th>职业</th>
                    <th>收入</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>28</td>
                    <td>北京</td>
                    <td>软件工程师</td>
                    <td>¥15,000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>35</td>
                    <td>上海</td>
                    <td>产品经理</td>
                    <td>¥20,000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>42</td>
                    <td>广州</td>
                    <td>销售总监</td>
                    <td>¥25,000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>31</td>
                    <td>深圳</td>
                    <td>UI设计师</td>
                    <td>¥18,000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>钱七</td>
                    <td>27</td>
                    <td>杭州</td>
                    <td>前端开发</td>
                    <td>¥16,000</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>孙八</td>
                    <td>38</td>
                    <td>成都</td>
                    <td>数据分析师</td>
                    <td>¥22,000</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>周九</td>
                    <td>45</td>
                    <td>重庆</td>
                    <td>项目经理</td>
                    <td>¥28,000</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>吴十</td>
                    <td>29</td>
                    <td>武汉</td>
                    <td>测试工程师</td>
                    <td>¥14,000</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>郑十一</td>
                    <td>33</td>
                    <td>西安</td>
                    <td>后端开发</td>
                    <td>¥19,000</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>王十二</td>
                    <td>40</td>
                    <td>南京</td>
                    <td>架构师</td>
                    <td>¥30,000</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>李十三</td>
                    <td>26</td>
                    <td>苏州</td>
                    <td>全栈开发</td>
                    <td>¥17,000</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>张十四</td>
                    <td>36</td>
                    <td>天津</td>
                    <td>运维工程师</td>
                    <td>¥21,000</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>刘十五</td>
                    <td>32</td>
                    <td>长沙</td>
                    <td>移动开发</td>
                    <td>¥18,500</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>陈十六</td>
                    <td>39</td>
                    <td>郑州</td>
                    <td>技术总监</td>
                    <td>¥35,000</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>杨十七</td>
                    <td>30</td>
                    <td>青岛</td>
                    <td>产品设计师</td>
                    <td>¥16,500</td>
                </tr>
                <!-- 重复数据以使滚动效果更明显 -->
                <tr>
                    <td>16</td>
                    <td>张三</td>
                    <td>28</td>
                    <td>北京</td>
                    <td>软件工程师</td>
                    <td>¥15,000</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>李四</td>
                    <td>35</td>
                    <td>上海</td>
                    <td>产品经理</td>
                    <td>¥20,000</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td>王五</td>
                    <td>42</td>
                    <td>广州</td>
                    <td>销售总监</td>
                    <td>¥25,000</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>赵六</td>
                    <td>31</td>
                    <td>深圳</td>
                    <td>UI设计师</td>
                    <td>¥18,000</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>钱七</td>
                    <td>27</td>
                    <td>杭州</td>
                    <td>前端开发</td>
                    <td>¥16,000</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="footer">

    </div>
    
    <script>
        // 暂停/继续滚动的功能
        document.addEventListener('click', function() {
            const table = document.querySelector('table');
            const animationState = table.style.animationPlayState;
            
            if (animationState === 'paused') {
                table.style.animationPlayState = 'running';
            } else {
                table.style.animationPlayState = 'paused';
            }
        });
        
        // 鼠标悬停时暂停滚动
        document.querySelector('.table-container').addEventListener('mouseenter', function() {
            document.querySelector('table').style.animationPlayState = 'paused';
        });
        
        document.querySelector('.table-container').addEventListener('mouseleave', function() {
            document.querySelector('table').style.animationPlayState = 'running';
        });
    </script>
</body>
</html>

ziblog
关注
精选资源
react-full-page:使用React全屏滚动
04-28
使用React全屏滚动 import React from 'react' ; import { FullPage , Slide } from 'react-full-page' ; export default class FullPageExample extends React . Component { render ( ) { return ( < h1> ...
jquery实现全屏滚动
10-23
全屏滚动是一种在网页设计中常见的交互效果，尤其在移动设备上使用频繁，它可以让用户在一个长页面中通过滚动操作进行快速浏览。使用jQuery实现全屏滚动已经成为前端开发者的常规技能之一。 全屏滚动的原理主要涉及...
css ios动画,css3使用animation实现消息轮播在iOS中的bug
weixin_42505246的博客
08-04 637
v-for="(item, index) in list":class="['scroll-item']":key="index">恭喜{{item.mobile}}抽中{{item.prizeName}}.......scroll-wrapper {position: absolute;white-space: nowrap;-webkit-transform: translateX...
背景图片向左移动
qq_45100858的博客
10-23 736
css代码 @keyframes scroll { 0% { background-position: 0 0; } 100% { background-position:-1020px 0; //图片的宽度 } } .bgImg{ /* width:270%; */ height:100%; background:url(../images/bgimg.png) repeat-x; background-position
制作滚动表格，循环列表表格内容
weixin_58544706的博客
08-14 1276
滚动表格
html表格全屏显示,tableView滑动全屏显示
weixin_36083434的博客
06-16 684
今天要分享的一个效果是在一个页面弹出视图展示一个tableview，然后手指滑动tableview时，视图随着tableview偏移量增加而慢慢增加，到达临界时，全屏显示，然后再次向下滑动时，当偏移量到达临界点，视图逐渐缩小，最终恢复正常大小，页面效果可以参考高德导航界面。这里贴上效果图这是高德导航的效果2DB81CA4986551A919D73A39C5303500.png208F6135CA0...
网页设计中的PC全屏滚动交互技术
weixin_42389113的博客
04-26 533
整屏滚动是一种常见的页面交互方式，主要用于网页内容较多的情况，用户通过滚动条或者页面触摸操作实现内容的逐屏切换。这种设计方式可以提供更加流畅和沉浸式的浏览体验，特别适用于宣传型网站、个人博客或者展示型页面。随着用户对网页体验要求的提升，整屏滚动的设计需求也日益增多。CSS3 引入的animation属性为网页设计提供了强大的动态效果，使得开发者可以创建复杂的动画效果，而不必依赖于JavaScript。一个完整的 CSS3 动画由两个核心属性构成：@keyframes和animation。
全屏滚动网站构建实战：从实例到技巧
weixin_42581003的博客
07-24 1030
CSS3动画引入了一种全新的方式来设计动画效果，它通过关键帧（keyframes）来描述动画序列，允许开发者控制动画的每个阶段，从而创建平滑且吸引人的视觉效果。CSS3动画的主要技术点包括：@keyframes规则：定义动画序列的关键帧，通过百分比指定动画进程中某个点的状态。animation属性：用于简化动画设置，包括动画名称、时长、延迟、迭代次数等。：控制动画的速度曲线，可以使用预定义的函数如ease、linear，也可以自定义贝塞尔曲线。
实现全屏图片左右滚动的JavaScript教程
weixin_42584507的博客
10-26 1211
本文还有配套的精品资源，点击获取 简介：通过JavaScript实现图片左右整屏滚动是一种网页动态效果，适用于产品展示或图片轮播。本文详细说明了如何实现这一功能，包括HTML结构的创建、CSS样式的应用以及JavaScript事件监听器的绑定。实现过程中需要考虑响应式设计、DOM操作、CSS布局和无障碍性实践，最终提供一个流畅的用户体验。 1. HTML结构布局 ...
实现全屏滚动页面的jQuery fullpage插件特效
weixin_35906794的博客
08-13 890
在构建现代网页时，特别是在创建具有全屏滚动的单页应用程序（SPA）时，用户界面（UI）设计的连贯性和流畅性至关重要。jQuery fullpage插件通过简化全屏滚动页面的实现，使得开发者能够轻松创建优雅的用户体验。本章旨在为读者介绍该插件的基本功能和使用场景，为后续章节中的详细实现和技术优化打下坚实的基础。滑块组件一般由轨道（Track）、滑块（Thumb）和可选的标签（Label）组成。它允许用户通过拖动滑块或者点击轨道来快速定位到页面的特定部分。
【工具】fullPage.js全屏滚动展示
Chandler2017的博客
12-09 950
是由西班牙开发者 Álvaro Trigo 创建并持续维护的超轻量级全屏滚动库（当前最新版本 4.x），专为打造沉浸式单页网站而生。文件大小：仅 ~15KB（gzip 后 < 8KB）无 jQuery 依赖（纯原生 JS）支持垂直全屏滚动 + 水平 Slide 滑动完美支持移动端触摸、键盘、鼠标滚轮内置锚点链接、懒加载、响应式降级开源 GPLv3 许可，商业项目可购买授权官网：https://alvarotrigo.com/fullPage/
el-table 表格从下往上滚动，触底自动请求新数据
细节怪的博客
04-19 1002
el-table 实现表格从下往上滚动，触底自动请求新数据；鼠标移入区域停止滚动，移出继续滚动。
实现淘宝式滚动全屏表格效果的难点与对策
标题中提到的“仿淘宝商城table滚动全屏效果”，指向的是一种网页布局的技术实现，即模拟淘宝商城中表格数据展示部分的滚动行为，从而实现用户在滚动查看商品列表时，导航栏和排序栏根据滚动位置进行显示和隐藏的...
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 157
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 173
Boolean。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 940
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 960
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1239
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 648
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值