jq 实现无缝衔接滚动

Posted 2020-12-22 wxhhts

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq 实现无缝衔接滚动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<style type="text/css">
		ul,
		li {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.wrap {
			width: 600px;
			margin: 60px auto auto auto;
		}

		.wrap-w {
			width: 100%;
			height: 486px;
			border: 1px solid #bfbfbf;
			overflow-x: hidden;
			overflow-y: scroll;
		}

		.wrap-w ul {
			width: 100%;
		}

		.wrap-w ul>li {
			padding: 0 10px;
			box-sizing: border-box;
			text-align: center;
			height: 40px;
			line-height: 40px;
		}

		.wrap-w ul>li:last-child {
			border-bottom: none;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="wrap-w">
				<ul class="c_scroll">
					<li>我是A</li>
					<li>我是B</li>
					<li>我是C</li>
					<li>我是D</li>
					<li>我是E</li>
					<li>我是F</li>
					<li>我是G</li>
					<li>我是H</li>
					<li>我是I</li>
					<li>我是J</li>
					<li>我是K</li>
					<li>我是L</li>
					<li>我是M</li>
					<li>我是N</li>
					<li>我是O</li>
					<li>我是P</li>
					<li>我是Q</li>
					<li>我是R</li>
					<li>我是S</li>
					<li>我是T</li>
				</ul>
			</div>
		</div>
		
		<div class="wrap">
			<div class="wrap-w">
				<ul class="c_scroll">
					<li>我是A</li>
					<li>我是B</li>
					<li>我是C</li>
					<li>我是D</li>

				</ul>
			</div>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

		<script type="text/javascript">
			
			//原理: 定时器 + 元素 margin-top 向上
			var _config = {
							speed: 40, //速度
							class: $(‘.c_scroll‘)//绑定的dom 
						}
			
						$(document).ready(function() {
							var _dom = _config.class; //获取绑定的dom
			                _dom.each(function (index, item) { //遍历dom ,防止这个是多个滚动
			           
			                    var _height = $(item).height();//获取每一个滚动区域的高
			
			                    var a = $(item).html();//获取每一个滚动的里面的html ,用户拼接完成无缝衔接
			
			                    var fatherHeight = $(item).parent().height();//获取每一个滚动区域父元素的高,滚动区高度不如父元素时,不滚动
			
			                    $(item).append(a);//将获取滚动区的内容拼接到滚动区,用于无缝衔接
			
			                    var marginTop = 0;//初始化滚动margin
							
			                    var init =[];//初始化数组,用户创建不同的定时器
			                    
			                    if (_height > fatherHeight) {//滚动区高度大于父元素高度,则滚动
			                            init[index]=setInterval(function() { //创建定时器
			                                marginTop = marginTop-1;
			                                $(item).css(‘margin-top‘, marginTop);
			                                if (Math.abs(marginTop) > _height) {
			                                    marginTop = 0;
			                                }
			                        },_config.speed);
			                    }
			
			                    $(item).hover( //鼠标移动到滚动区,清除定时器,移出去,则增加
			                        function(){
			                            clearInterval(init[index]);
			                        },
			                        function(){
			                            init[index]=setInterval(function() {
			                                marginTop = marginTop-1;
			                                $(item).css(‘margin-top‘, marginTop);
			                                if (Math.abs(marginTop) > _height) {
			                                    marginTop = 0;
			                                }
			                        },_config.speed);
			                        }
			                    )
			                        
			                })	
			                
		　　})
		</script>


	</body>
</html>

以上是关于jq 实现无缝衔接滚动的主要内容，如果未能解决你的问题，请参考以下文章

jq 实现 无缝衔接 滚动

jq 实现无缝衔接滚动