Question

原生js或jQuery怎么让滚动条只能滚动固定的距离？

我现在纵向排布了好几张大图，图片高度和浏览器客户区高度相同。我希望拖动滚动条时可以正常滚动，但松开滚动条时页面会自动调整只显示一整张完整图片，而不是上下各显示半张图片。

目前只能想到mouseup时来滚动页面，但好像没办法判断是什么时候的mouseup时滚动结束时的mouseup。

Answer 1

$(window).bind("scroll", function(){
var top = $(this).scrollTop(); // 当前窗口的滚动距离
});

如果使用原生js，可以这样写（摘自网上的）：

/**
* 获取滚动条距离顶端的距离
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}

Answer 2

::-webkit-scrollbar{width:0px}目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效，依旧可以滚动。你可以在JS里面写判定当用户鼠标不动一定时间然后消失。我对JS不是特别了解(只能看懂和修改JS代码的程度的能力，但是无论任何JS代码都敢修改的程度)，这效果能做出来的，我就不贴具体代码了。不需要嵌套，纯原生。将来浏览器会支持这个效果的。或者你用滚动条插件(不推荐)