乌徒帮技术范WEB开发jQuery › jQuery双击横向来回滚动

jQuery双击横向来回滚动

分类:jQuery

在《超简单jquery横向滑动滚动:scrollWidth+scrollLeft+animate()巧用》一文中,我介绍了在javascript的世界里,scrollLeft、offset等的一些奥秘。本文则带来更为简洁的jquery横向来回滚动代码

$('html').dblclick(function(){
	$scroll_width = $('html')[0].scrollWidth;
	$window_width = $(window).width();
	$scroll_place = $('html').scrollLeft();
	if(($scroll_place + $window_width/2) < $scroll_width/2){
		$('html').animate({scrollLeft: $scroll_width - $window_width},800);
	}else{
		$('html').animate({scrollLeft: 0},800);
	}
});

查看演示

原理也很简单,在双击html的情况下,获取html,window的宽度和滚动条的位置,通过判断他们之间的数量关系,最终实现了横向的来回双击滚动。

不过,在后期,乌徒帮发现在火狐浏览器下和谷歌浏览器下,它们对$('html'),$('body')的认知是不同的,$scroll_width在谷歌下会变小,而在火狐下则浏览器认为$('html')在滚动,谷歌浏览器下$('body')在滚动,因此上面的代码并不能兼容两个浏览器。同时,为了让双击变得更有层次性(噱头),我将代码改为:

$('html').dblclick(function(){
	$('body').css('overflow-x','scroll');
	$scroll_width = $(document).width();
	$window_width = $(window).width();
	$scroll_place = $('html').scrollLeft() ? $('html').scrollLeft() : $('body').scrollLeft();// 兼容浏览器
	if(($scroll_place + $window_width/2) < $scroll_width/2){
		$('html,body').animate({scrollLeft:$scroll_width - $window_width},800,function(){
			$('body').css('overflow-x','hidden');
		});
	}else{
		$('html,body').animate({scrollLeft: 0},800,function(){
			$('body').css('overflow-x','hidden');
		});
	}
});

在默认情况下,我隐藏了横向滚动条,双击之后,首先将滚动条显示出来,这个时候scroll才能有效。在兼容性上,修改$scroll_width = $(document).width();和$scroll_place = $('html').scrollLeft() ? $('html').scrollLeft() : $('body').scrollLeft();以兼容不同的浏览器。同时,还为animate增加第三个参数,回调执行完以后将横向滚动条隐藏。这样就非常好玩了。

填写个人信息,赶快回复吧!