用javascript如何实现滚动条横向滚动的效果?

是的,scriptaculous的Effect.ScrollTo动画只能实现纵向的效果。即用采用锚标记定位时,让跳转的过程不那么生硬,有一个动画效果,慢慢滚动过去,但是他只在页面是纵向布局的时候可行。如果页面是横向的,像gucci的网站那样,就不行了。给出下面的代码,重写Effect.ScrollTo,来实现横向滚动的效果。

Effect.ScrollTo = Class.create();
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {

initialize: function(element) {
this.element = $(element);
this.start(arguments[1] || {});
},

setup: function() {
Position.prepare();
var offsets = Position.cumulativeOffset(this.element);
if(this.options.offsetX) offsets[0] += this.options.offsetX;
if(this.options.offsetY) offsets[1] += this.options.offsetY;

var maxWidth = window.innerWidth ?
window.width – window.innerWidth :
document.body.scrollWidth –
(document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth);
this.scrollStartX = Position.deltaX;
this.deltaX = (offsets[0] > maxWidth ? maxWidth : offsets[0]) – this.scrollStartX;

var maxHeight = window.innerHeight ?
window.height – window.innerHeight :
document.body.scrollHeight –
(document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight);
this.scrollStartY = Position.deltaY;
this.deltaY = (offsets[1] > maxHeight ? maxHeight : offsets[1]) – this.scrollStartY;
},

update: function(position) {
Position.prepare();
window.scrollTo(
this.scrollStartX + (position * this.deltaX),
this.scrollStartY + (position * this.deltaY)
);
}
});
Event.observe(window, ‘load’, function() {
$$(‘a[href^=#]:not([href=#])’).each(function(element) {
element.observe(‘click’, function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})

点右键另存为hor.js