jquery 改变 scrollTop属性 如何 不触发 scroll() 事件

时间：2022-04-18 10:57:36
页面有两个功能，一个是滚动滚轮，当scrollTop大于200px时 ，将导航块position:fixed
 另一个功能是点击另一侧边导航，设置scrollTop 页面就滚动到内容锚点。

问题是 当我点击侧导航，就触发了滚轮滚动的scroll()事件。怎么才能不触发。
就是说scroll事件只针对滚轮有效，对于设置scrollTop不触发

2 个解决方案

#1

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

div{

	width:100px;

	height:1000px;

	background-color:#F00;

}

</style>

</head>


<body>

<input type="button" onclick="xx()">

<div></div>

<script type="text/javascript">

window.onscroll=function(){

	console.log('a');

}

function xx(){

	var d=window.onscroll;

	window.onscroll=null;

	document.body.scrollTop=100;

	document.documentElement&&(document.documentElement.scrollTop=100);

	window.setTimeout(function(){

	window.onscroll=d;

							   },100);

}

</script>

</body>

</html>

先移除事件再绑定试试

#2

思路是不错的，下边是我用jquery写的大概，有效果

$(function(){
var G = {
scrollEventFun: function(){
var sh = $(window).scrollTop();
if(sh >= 102) {
var fh = $('.fix-header');
fh.fadeIn('slow');
$('nav').css({'position':'fixed', 'top':fh.height()});
}
else {
$('.fix-header').fadeOut('slow');
var hh = $('header').height();
$('nav').css({'position':'absolute', 'top':hh});
}
},
liClickEventFun: function(){
$(window).unbind('scroll');
$('nav ul li').removeClass();
$(this).addClass('active');

var href = $(this).data('anchor');

$('html').stop().animate({scrollTop: $("."+href).offset().top-58}, 1000, function(){$(window).bind('scroll', G.scrollEventFun);});
}
};

$(window).bind('scroll', G.scrollEventFun);
$('nav ul').delegate('li', 'click', G.liClickEventFun);
});

#1

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

div{

	width:100px;

	height:1000px;

	background-color:#F00;

}

</style>

</head>


<body>

<input type="button" onclick="xx()">

<div></div>

<script type="text/javascript">

window.onscroll=function(){

	console.log('a');

}

function xx(){

	var d=window.onscroll;

	window.onscroll=null;

	document.body.scrollTop=100;

	document.documentElement&&(document.documentElement.scrollTop=100);

	window.setTimeout(function(){

	window.onscroll=d;

							   },100);

}

</script>

</body>

</html>

先移除事件再绑定试试

#2

思路是不错的，下边是我用jquery写的大概，有效果

$(function(){
var G = {
scrollEventFun: function(){
var sh = $(window).scrollTop();
if(sh >= 102) {
var fh = $('.fix-header');
fh.fadeIn('slow');
$('nav').css({'position':'fixed', 'top':fh.height()});
}
else {
$('.fix-header').fadeOut('slow');
var hh = $('header').height();
$('nav').css({'position':'absolute', 'top':hh});
}
},
liClickEventFun: function(){
$(window).unbind('scroll');
$('nav ul li').removeClass();
$(this).addClass('active');

var href = $(this).data('anchor');

$('html').stop().animate({scrollTop: $("."+href).offset().top-58}, 1000, function(){$(window).bind('scroll', G.scrollEventFun);});
}
};

$(window).bind('scroll', G.scrollEventFun);
$('nav ul').delegate('li', 'click', G.liClickEventFun);
});
标签：

相关文章