超简单jquery横向滑动滚动：scrollWidth+scrollLeft+animate()巧用

更新：jQuery双击横向来回滚动

因为做新的主题，所以再研究了一下jquery里的scrollWidth及相关的东西，最终实现了jquery横向滚动（双击自动滚动到左边或右边）。废话少说，直接上代码：

$(document).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');
		});
	}
});

文章已经更新：jQuery双击横向来回滚动

（图中白色区域为屏幕可见区域，灰色为不可见的被隐藏区域，不可见区域有左右两部分）

上面这段代码是经过很长时间琢磨出来的，代码虽然简单，却包含了多个知识点，本文只对该代码讲解，相关知识将在其它文章中讲解。

$scroll是要滚动的div，这可根据你自己的需要进行修改，我的滚动是使用两个div，<div id="wapper"><div id="scroll-body"></div></div>，scroll-body的宽度很大，隐藏wapper的纵向滚动条后横向可以滚动。

$scrollWidth是要滚动的实际宽度（包括屏幕中可见和屏幕外不可见部分），实际上即scroll-body的宽度3000px。即上图中深蓝色横向线1的长度。

$width是目前屏幕的宽度，即可见区域的宽度，实际上是wapper的宽度，设为1200px。即上图中红色横向线3的长度。

$scrollLeft是目前的scrollLeft位置，注意不是滚动条的位置，而是将滚动条抽象成一个点的位置，经过测试，它的最大值为1800px，即3000-1200，即$width - $scrollWidth。可以看出$scrollLeft即左边屏幕外被隐藏区域的宽度。即上图中绿色横向线2的长度。

$scrollWidth/2 + $scrollLeft：左边被屏幕外被隐藏区域的宽度+可见区域宽度（屏幕宽度）/2，这个值与$width/2比较之后可以判断是否已经阅览了一半以上的网页，如果大于，则是，如果小于则不是，等于当然是指正好了。上图中浅蓝色横向线5表示$scrollWidth/2 + $scrollLeft，紫色横向线4表示$width/2，而我们可以看出横向线5-2即二分之一的屏幕宽度，即$width/2。

$scroll.animate({scrollLeft:$width - $scrollWidth},900);一句你需要先搜索一下animate()，了解它的用途。这句的意思是对wapper进行animate()方法（带有动画的css效果），animate的内容是用900毫秒的时间，实现让scrollLeft等于$width - $scrollWidth，也就是让滚动条所代表的质点到达最大值，这样就滚动到最右边了。

$(document).dblclick(function(e){})：在双击文本（屏幕）时执行脚本，最终实现双击屏幕横向滑动滚动条。

其他代码你可以根据上文的解释进行理解。

参考信息：(请自行谷歌)

scrollWidth、scrollLeft、scrollHeight、scrollTop

scrollWidth,clientWidth与offsetWidth的区别

animate()