`
fantaxy025025
  • 浏览: 1248008 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js控制鼠标滚轮的方法_javascript控制鼠标滚轮的方法_jquery控制鼠标滚轮的方法

 
阅读更多

=

js没有模拟click这样的scroll函数。仅仅通过控制scrollUp, scrollLeft坐标控制滚动条位置。

也就是说，js只有滚动条，没有滚轮。

 

但是autoit中有滚轮，具体见autoit鼠标控制文档。

=

 

解决方法1：利用jquery动画来控制滚轮位置，并达到滚动效果。

$("html,body").animate({scrollTop : $(this).offset().top}, 3000);

可以直接复制到html文件中运行，查看效果。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
<script>
	function go(index){
		//$(document).scrollTop(1);
		$("html,body").animate({scrollTop: $("#"+index).offset().top}, 1000); 
	}
</script>
</head>
 
	
<body>
	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>
	
<div id="box1">box1</div>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>

	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>

<div id="box2">box2</div>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	
	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>
</body>
</html>

 如果要不停的运行好多次，用js的定时执行次数就可以了。

 setInterval(function(){
    scroll_method_xxx();
 }, 5000);

  

 

参考（注意有优化和改动）：https://blog.csdn.net/sauzny/article/details/84280501

 

jquery 控制滚动条 实现自动滚动浏览

from：https://blog.csdn.net/qq_33281259/article/details/117016858

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="{$p_tpl}/js/jquery-3.5.1.js" charset="utf-8"></script>
<style>
.kj{
	height:70px;
	width:25%;
	float:left;
	color:#fff;
	font-size:40px;
}
</style>
</head>


<body>
	<?php
		$arr=['red','blue','green','yellow','gray','black'];
	?>
	
    <for start='0' end='200' comparison="lt" step="1" name="i">
		
		<div class="kj" data-cc="{$i}" style="background-color:{$arr[$i%6]}">{$i}</div>
	
	</for>
</body>
<script>
	var zd_height=200;
	setInterval(function(){
		scroll_auto();
	},5000);
	function scroll_auto(){
		var gdt_height  =$(window).scrollTop();//当前滚动条高度
		var kj_height   = $(window).height();//浏览器可见区域高度
		var body_height = $(document).height();//body实际高度
		if(gdt_height + kj_height < body_height){
			//滚动条高度加可见高度没超出实际高度--往下滚动指定高度
			$("html,body").animate({scrollTop:gdt_height + zd_height}, 500);
		}else if(gdt_height + kj_height > body_height){
			//滚动条高度加可见高度超出实际高度--拉到底部
			$("html,body").animate({scrollTop:body_height - kj_height}, 500);
		}else{
			//滚动条高度加可见高度等于实际高度--回到顶部
			$("html,body").animate({scrollTop:"0px"}, zd_height);
		}
	}
</script>
</html>

 

 

参考案例：

js控制web页面滚动距离 鼠标滚轮移动距离控制 平滑滚动提高web页面体验感

参考：地址：https://blog.csdn.net/m3374k/article/details/105838216

实现思路

首先明确，我们的页面中有多少需要滚动定位的元素，比如有这样一个列表[ele1,ele2,ele3]，当用户滚动滚轮时，需要暂时让滚轮事件停止响应，因为滚轮事件的触发条件是滚轮里的卡点(滚动时明显的停顿感)每动一下就要触发，所以一次触发后需要先停止一会（防止反复触发），并且，在触发后，如果由代码实现滚动，还需要阻止用户滚轮的默认行为，否则两种滚动方式都会运行，页面会卡住不动。
明确滚轮事件的原理之后，需要确认是向上滚动还是向下，一次滚动的距离是多少。根据滚轮事件，向上向下很好判断。滚动距离需要根据实际情况，比如，我们在页面中抓了3个点，获取这3个点距离文档顶部的距离就可以了，之后实现页面滚动的函数，让页面滚动到我们希望的位置。

技术点/知识点

需要了解一下技术点：

  1. preventDefault ，阻止浏览器默认事件；
  2. window.scrollTo 页面进行滚动；
  3. mousewheel 鼠标滚轮触发事件；
  4. document.querySelector 选取页面元素；
  5. element.offsetTop 当前元素距离文档顶部距离；
    了解了这几点，就能实现我们的需求了。
    在代码中，
    有2个关键的变量，一个是cur_index，描述当前滚动到哪个元素。
    invoke，描述当前是否在滚动中，在moveTo函数中，先判断该变量，避免重复触发。

 

 

补充知识：

jQuery scrollTop() 方法

jQuery 动画 - animate() 方法

 

 

 

=

=

=

 

分享到：
| selenium元素定位之父子节点、兄弟节点
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics