Question

除了锚点之外，您可以使用 JavaScript 在Web浏览器中控制/阅读滚动条的不同方法有哪些？ - 除非你可以动态创建锚点并告诉浏览器向下滚动到那个。

Answer 1

Here is one example如何在没有锚点的情况下控制X / Y滚动。（ScrollX / ScrollY）

我认为关键部分是以下

function saveScrollCoordinates() { 
  document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; 
  document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; 
}

Answer 2

滚动任意数量：

//Parameters being the amount by which to scroll in pixels (horizontal and vertical)
window.scrollBy(50, 50);

滚动到某个点：

 window.scrollTo(0, 30);

阅读当前位置：

 document.body.scrollLeft
 document.body.scrollTop

Answer 3

使用 scrollTop 属性（所有元素的固有属性），您可以滚动到特定的像素高度。因此，滚动到特定锚点的高度将涉及查询该锚点的偏移量并相应地设置 scrollTop 。只是为了说明的缘故;这是你用jQuery滚动到指定元素的方式：

var top = $('div#something').offset().top;
$(document).scrollTop(top);

注意：jQuery的实现可能会产生误导;它接受 document ，但 scrollTop 属性中最顶层的元素实际上是 document.documentElement （通常指 <HTML> ）。

水平滚动还有 scrollLeft 属性。

当然，你可以阅读这些属性：

var currentScrollTop = document.documentElement.scrollTop;

Answer 4

原型implements一个scrollTo()函数，可以很容易地滚动到特定元素：

$("#elementID").scrollTo();

实现内部调用window.scrollTo来进行实际滚动。

Answer 5

var coord = {top:null,left:null,width:null,height:null};
        if (typeof window.pageYOffset == 'number') {
            coord.top = window.pageYOffset; coord.left = window.pageXOffset;            
        } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
            coord.top = document.body.scrollTop; coord.left = document.body.scrollLeft;
        } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            coord.top = document.documentElement.scrollTop; coord.left = document.documentElement.scrollLeft;
        }

        if (typeof window.innerWidth == 'number') {
            coord.width = window.innerWidth; coord.height = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            coord.width = document.documentElement.clientWidth; coord.height = document.documentElement.clienthHeight; 
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
            coord.width = document.body.clientWidth;
            coord.height = document.body.clientHeight;
        }

如何滚动显示网页的一部分

5 个答案: