fantaxy025025

浏览: 1328067 次
性别:
来自: 北京

最近访客更多访客>>

大家都说我很棒

songhait

GDGZWQZ

zjut_wyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

js_css_html_xml_nodejs

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个点距离文档顶部的距离就可以了，之后实现页面滚动的函数，让页面滚动到我们希望的位置。

技术点/知识点

需要了解一下技术点：

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

补充知识：

jQuery scrollTop() 方法

jQuery 动画 - animate() 方法

分享到：

【拾遗】java数组copy拷贝复制的工具类方法 | selenium元素定位之父子节点、兄弟节点

2022-06-10 17:20
浏览 453
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

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

实现思路

技术点/知识点

jQuery scrollTop() 方法

jQuery 动画 - animate() 方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

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

实现思路

技术点/知识点

jQuery scrollTop() 方法

jQuery 动画 - animate() 方法

评论

发表评论

相关推荐

浏览器辅助神器：油猴脚本使用教程

jquery判断元素是否隐藏是否可见的多种方法

js JavaScript 读取文件数据、导出文本到文件。console输出到本地文件

万能代码，一招破解网页禁止复制

jQuery 选择同时包含两个class的元素的实现方法

5个JS模板引擎

获取weixin文章列表的js

如何在console控制台导入jquery

Jquey_Selenium对不显示节点的处理不同_比如getText结果不同

［知乎问题］如何衡量一个人的angularjs水平？

HTTP头的Expires与Cache-control区别

200 OK (from cache) 与 304 Not Modified

gulp_如何保证任务和程序顺序执行？

nodejs之supervisor__supervisor的python版本

nodejs_cnpm导致node的prefix和cache和node_global配置环境变量不起作用

Foundation和zepto

npm link 命令解析

nodejs npm常用命令

nodejs中的环境变量：NODE_PATH

gulp用到的资料-整理了一下

最近访客更多访客>>

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

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