参考博客：https://blog.csdn.net/yubo_725/article/details/52839493  大佬是真的厉害，保存一下，以方便后续使用

效果：

源码：

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap  Template</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <style type="text/css">

        .content {

            width: 500px;

            margin: 50px 50px;

        }

        .header {

            line-height: 50px;

            background-color: #ECECEC;

        }

        .data {

            height: 300px;

            overflow: hidden;

        }

    </style>

  </head>

  <body>

    <div class="content">

        <div class="header row">

            <div class="col-md-3">姓名</div>

            <div class="col-md-3">性别</div>

            <div class="col-md-3">年龄</div>

            <div class="col-md-3">职业</div>

        </div>

        <div class="data">

            <div class="data-content">

                <table class="table table-hover">

                </table>

            </div>

            <div class="data-footer"></div>

        </div>

    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        var html = '';

        for(var i = ; i < ; i++) {

            html += '<tr>';

            html += '<td>数学' + i + '</td>';

            if(i %  == ) {

                html += '<td>男</td>';

            } else {

                html += '<td>女</td>';

            }

            html += '<td>' + ( + i) + '</td>';

            html += '<td>数学老师</td>';

            html += '</tr>';

        }

        $('.table').html(html);

        $('td').addClass('col-md-3');

        var dataDOM = $('.data')[];

        var dataContentDOM = $('.data-content')[];

        var dataFooterDOM = $('.data-footer')[];

        var height = dataDOM.offsetTop + dataDOM.offsetHeight;

        setInterval(function() {

            if(dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= ) {

                dataDOM.scrollTop -= dataContentDOM.offsetHeight;

            } else {

                dataDOM.scrollTop++;

            }

        }, );

    </script>

  </body>

</html>

JS表单内容垂直循环滚动的更多相关文章

  1. html固定表头，表单内容垂直循环滚动

    <!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8 ...

  2. js 表单内容使用ajax以json格式混合提交

    脚本代码 function submitForm(){    var post_data = $("#form1").getdict();    var data_dict = { ...

  3. Ajax提交form表单内容和文件（jQuery.form.js）

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  4. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  9. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

随机推荐

  1. 笔记||Python3之字符串

    字符串是Python中最常用的数据类型.我们可以使用引号('或''或''')来创建字符串. 三引号特点:可以多行,也可以多行注释. a = 'hello world' a = "hello ...

  2. 基于iCamera测试AR0134 960p 全局快门相机模块小结

    基于iCamera测试AR0134 960p 全局快门相机模块小结 首先看看此模块的特性 AR0134 全局曝光 CMOS模块 1280*960像素 5.3 V/lux-sec 摄像头模块实物靓照(上 ...

  3. windows下安装ssdb

    官方下载 http://ssdb.io/docs/install.html 这是官方网站 官方建议 Do not run SSDB server on Windows system for a pro ...

  4. Prometheus启动失败的问题

    1.yml文件格式错误 Prometheus是开箱即用的,但是我们用的时候因为新增监控项,所以我们需要修改配置文件.改了之后启动不了的话,第一件事就要想的是yaml文件的格式问题. yaml中允许表示 ...

  5. robot_framework常用关键字

    快捷键 F8 运行 ctrl+alt+空格 log 类似于print Set variable 定义变量 Catenate 连接对象 SEPARATOR 对多个连接信息进行分割 Create List ...

  6. Cloudflare Workers 部署跨域代理服务

    项目源码:https://github.com/netnr/workers 发布链接:https://cors.zme.ink 使用文档:https://developers.cloudflare.c ...

  7. Vue 02

    目录 表单指令v-model 条件指令v-if 循环指令v-for 分隔符delimiters 过滤器filters 计算属性computed 监听属性watch 前端数据库 表单指令v-model ...

  8. 《Java基础知识》Java标示符、保留字和数制

    一.Java标识符程序员对程序中的各个元素加以命名时使用的命名记号称为标识符(identifier).Java语言中,标识符是以字母,下划线(_),美元符($)开始的一个字符序列,后面可以跟字母,下划 ...

  9. 集群环境下，你不得不注意的ASP.NET Core Data Protection 机制

    引言 最近线上环境遇到一个问题,就是ASP.NET Core Web应用在单个容器使用正常,扩展多个容器无法访问的问题.查看容器日志,发现以下异常: System.Security.Cryptogra ...

  10. UWP 更强大的文件获取能力

    默认情况下,通用 Windows 平台 (UWP) 应用可以访问特定文件系统位置. 应用也可以通过文件选取器或通过声明功能访问其他位置. 在创建新的应用时,默认情况下你可以访问以下文件系统位置: 1. ...