Как прокрутить, чтобы показать часть веб-страницы - PullRequest
Новая
       7

Как прокрутить, чтобы показать часть веб-страницы

1 голос
/ 14 мая 2009

Какими различными способами можно управлять / читать полосу прокрутки в веб-браузере с помощью JavaScript , кроме привязок? - Если вы не можете динамически создавать якоря и указывать браузеру прокрутить вниз до этого.

Ответы [ 5 ]

1 голос
/ 13 сентября 2010 
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;
        }
1 голос
/ 14 мая 2009

Prototype реализует функцию scrollTo(), которая позволяет действительно легко прокрутить до определенного элемента: 

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

Реализация внутренне вызывает window.scrollTo для фактической прокрутки.

1 голос
/ 14 мая 2009

Для прокрутки на произвольную сумму: 

//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
1 голос
/ 14 мая 2009

Используя свойство scrollTop (присуще всем элементам), вы можете перейти к определенной высоте пикселя. Таким образом, прокрутка до высоты конкретного якоря потребует запроса смещения этого якоря и установки scrollTop соответственно. Просто для иллюстрации; Вот как вы можете прокрутить до указанного элемента с помощью jQuery: 

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

ПРИМЕЧАНИЕ : реализация jQuery может вводить в заблуждение; он принимает document, но самый верхний элемент со свойством scrollTop фактически равен document.documentElement (обычно относится к <HTML>).

Существует также свойство scrollLeft для горизонтальной прокрутки.

И, конечно, вы можете прочитать эти свойства: 

var currentScrollTop = document.documentElement.scrollTop;
1 голос
/ 14 мая 2009

Вот один пример того, как вы можете управлять прокруткой 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; 
}
...