使用 Jquery 的 DoubleScroll

17 Mar 2025 | 4 分钟阅读

在本文中，我们将了解 Doublescroll Jquery 插件。此插件在可滚动容器的底部滚动条存在时，在可滚动容器的顶部创建一个额外的滚动条。它还有能力在窗口每次调整大小时重新计算顶部滚动条的大小。

什么是滚动条?

滚动条用于确定用户操作滚动条时滚动的方向。

滚动条的类型

水平滚动条： 顶部或底部的水平滚动条用于将页面内容向左或向右滚动。
垂直滚动条： 左侧或右侧的垂直滚动条用于将页面内容向上或向下滚动。

以下是 Doublescroll Jquery 插件的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of Doublescroll jquery plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
.dashbd-tab.table th {
  min-width: 180px;
  color: #bb90d1;
  vertical-align: middle !important;
}
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
dashbd-tab.table td {
  min-width: 180px;
  color: #bb90d1;
  vertical-align: middle !important;
}
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 10;
  text-align: center;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
background: linear-gradient(130deg, #07d9a3, #048fee);
  -webkit-animation: gradient 16s ease infinite;
  -moz-animation: gradient 16s ease infinite;
  animation: gradient 16s ease infinite;
}
.dashbd-tab.table th:first-child  {
  min-width: 140px;
  padding-left: 30px;
}
.dashbd-tab.table td:first-child {
  min-width: 140px;
  padding-left: 30px;
  font-family: Helvetica, Arial, sans-serif;
}
.dashbd-tab {
  border: 1px solid #ddd;
  border-radius: 6px;
}
.dashbd-tab.table th { color: #dc3545;
  font-weight: 800;
  font-size: 24px;
  border-bottom: 1px solid #EEF0F1;
  font-family: Helvetica, Arial, sans-serif;
}
.dashbd-tab.table td {
  color: #bb90d1;
  font-weight: 500;
  border-bottom: 1px solid #E8EAED;
  font-size: 14px;
}
h2 {
   font-weight: 200;
  font-size: 20px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: green;
  letter-spacing: 2px;
   text-align: center;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  color: white;
  font-weight: 200px;
    background: #000000;
}
.fixed-scroll {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999;
  background: #fff;
}
</style>
<body>
<h1> Example </h1>
<h2> Double scrollbar using Jquery Plugin </h2>
<div class = "table-responsive dashboard-table">
                <table class = "table">
                   <thead>
                       <th> Sr.No </th>
                       <th> Name </th>
                       <th> English </th>
                      <th> Maths </th>
                       <th> Punjabi </th>
                       <th> Science </th>
                       <th> SST </th>
                       <th> Sanskrit </th>
                       <th> GK </th>
                       <th> Hindi </th>     
                   </thead>
                   <tbody>
                   <tr>
                       <td>    
                             1
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                   <tr>
                       <td>
                         2
                        </td>        
                       <td> Monty </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                    </tr>
                   <tr>
                       <td>
                         3
                        </td>
                       <td> Lily </td>
<td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>     
                   </tr>        
<tr>
                       <td>    
                             4
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                     <tr>
                       <td>    
                             5
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
             <tr>
                       <td>    
                             6
                        </td>
                       <td> Raghu </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                     <tr>
                       <td>    
                             7
                        </td>
                       <td> Etender </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
<script>
$(document).ready(function() {
	  $('.dashboard-table').doubleScroll( {
	    resetOnWindowResize: true
	  });
	    var s = $(".doubleScroll-scroll-wrapper");
		var pos = s.position();					   
		$(window).scroll(function() {
			var windowpos = $(window).scrollTop();
			if (windowpos >= pos.top) {
				s.addClass("fixed-scroll");
			} else {
				s.removeClass("fixed-scroll");	
			}
		});	  
	});
  (function( $ ) {
 	jQuery.fn.doubleScroll = function(userOptions) {
		var options = {
			ce: undefined,
			scrollCss: {                
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			},
			contentCss: {
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			}, 
		};
		$.extend(true, options, userOptions);
	$.extend(options, {
			topScrollBarMarkup: '<div class = "doubleScroll-scroll-wrapper" 
			style = "height: 20px;"> <div class = "doubleScroll-scroll" 
			style = "height: 20px;"> </div> </div>',
			topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
			topScrollBarInnerSelector: '.doubleScroll-scroll'
		});
		var _showScrollBar = function($self, options) {
			if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
				$self.prev(options.topScrollBarWrapperSelector).remove();
				return;
			}
			var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
			if ($topScrollBar.length == 0) {
				$topScrollBar = $(options.topScrollBarMarkup);
				$self.before($topScrollBar);
				$topScrollBar.css(options.scrollCss);
				$self.css(options.contentCss);
				$topScrollBar.bind('scroll.doubleScroll', function() {
					$self.scrollLeft($topScrollBar.scrollLeft());
				});
				var selfScrollHandler = function() {
					$topScrollBar.scrollLeft($self.scrollLeft());
				};
				$self.bind('scroll.doubleScroll', selfScrollHandler);
			}
			var $ce;		
			if (options.ce !== undefined && $self.find(options.ce).length !== 0) {
				$ce = $self.find(options.ce);
			} else {
				$ce = $self.find('>:first-child');
			}
				$(options.topScrollBarInnerSelector, $topScrollBar).width($ce.outerWidth());
			$topScrollBar.width($self.width());
			$topScrollBar.scrollLeft($self.scrollLeft());	
		}
		return this.each(function() {
			var $self = $(this);
			_showScrollBar($self, options)
			if (options.resetOnWindowResize) {
				var id;
				var handler = function(e) {
		           	_showScrollBar($self, options);
				};
				$(window).bind('resize.doubleScroll', function() {										
				clearTimeout(id);
			id = setTimeout(handler, options.timeToWaitForResize);
				});
			}
		});
	}
} ( jQuery ));
</script>
</body>
</html>

说明

在上面的示例中，我们使用 Jquery 创建了一个 HTML 表格中双滚动条的示例。在此，我们创建了一个双水平滚动条。第一个滚动条出现在内容顶部，另一个滚动条出现在内容底部。内容应根据滚动条左右移动。

输出

以下是这个例子的输出。

下一主题使用 Jquery 实现日夜切换

使用 Jquery 的 DoubleScroll

什么是滚动条?

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 的 DoubleScroll

什么是滚动条?

示例 1

相关帖子

Jquery Flickerplate 插件

垂直点导航插件

JQuery 排序

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

如何检测移动设备

使用 JavaScript 进行语言翻译

使用 JQuery 将 Excel 数据导入 HTML 表格

jquery 社交计数器插件

jQuery 时间选择器

JQuery 验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器