Кросс-браузерный метод определения процента вертикальной прокрутки в Javascript
Как я могу узнать, какой процент вертикальной полосы прокрутки пользователь прошел в любой момент?
достаточно легко поймать событие "onscroll" для запуска, когда пользователь прокручивает страницу вниз, но как узнать в этом событии, как далеко они прокрутили? В этом случае особенно важен процент. Я не особенно беспокоюсь о решении для IE6.
сделайте любую из основных фреймворков (Dojo, jQuery, Prototype, Mootools) выставить это простым кросс-браузерным совместимым способом?
спасибо,
10 ответов
октября 2016 года: исправлено. Скобки в jsbin демо отсутствует ответ. Упс.
Chrome, Firefox, IE9+. Live Demo на jsbin
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
функции:
function getScrollPercent() {
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}
если вы предпочитаете jQuery
(оригинал ответа):
$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrollPercent = (s / (d - c)) * 100;
console.clear();
console.log(scrollPercent);
})
html{ height:100%; }
body{ height:300%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Я думаю, что нашел хорошее решение, которое не зависит от какой-либо библиотеки:
/**
* Get current browser viewpane heigtht
*/
function _get_window_height() {
return window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight || 0;
}
/**
* Get current absolute window scroll position
*/
function _get_window_Yscroll() {
return window.pageYOffset ||
document.body.scrollTop ||
document.documentElement.scrollTop || 0;
}
/**
* Get current absolute document height
*/
function _get_doc_height() {
return Math.max(
document.body.scrollHeight || 0,
document.documentElement.scrollHeight || 0,
document.body.offsetHeight || 0,
document.documentElement.offsetHeight || 0,
document.body.clientHeight || 0,
document.documentElement.clientHeight || 0
);
}
/**
* Get current vertical scroll percentage
*/
function _get_scroll_percentage() {
return (
(_get_window_Yscroll() + _get_window_height()) / _get_doc_height()
) * 100;
}
это должно сделать трюк, никаких библиотек не требуется:
function currentScrollPercentage()
{
return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}
Если вы используете Dojo, вы можете сделать следующее:
var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));
который вернет значение от 0 до 1.
этот вопрос здесь уже давно, я знаю, но я наткнулся на него, пытаясь решить ту же проблему. Вот как я решил это, в jQuery:
во-первых, я завернул то, что хотел прокрутить в div (не семантический, но это помогает). Затем установите переполнение и высоту на обертке.
<div class="content-wrapper" style="overflow: scroll; height:100px">
<div class="content">Lot of content that scrolls</div>
</div>
наконец, я смог вычислить % прокрутки из этих показателей:
var $w = $(this),
scroll_top = $w.scrollTop(),
total_height = $w.find(".content").height(),
viewable_area = $w.height(),
scroll_percent = Math.floor((scroll_top + viewable_area) / total_height * 100);
вот скрипка с рабочим примером: http://jsfiddle.net/prEGf/
они отлично работали для меня в Chrome 19.0, FF12, IE9:
function getElementScrollScale(domElement){
return domElement.scrollTop / (domElement.scrollHeight - domElement.clientHeight);
}
function setElementScrollScale(domElement,scale){
domElement.scrollTop = (domElement.scrollHeight - domElement.clientHeight) * scale;
}
var maxScrollTop = messages.get(0).scrollHeight - messages.height();
var scroll = messages.scrollTop() / maxScrollTop; // [0..1]
сначала прикрепите прослушиватель событий к некоторому документу, который вы хотите отслеживать
yourDocument.addEventListener("scroll", documentEventListener, false);
затем:
function documentEventListener(){
var currentDocument = this;
var docsWindow = $(currentDocument.defaultView); // This is the window holding the document
var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
var scrollTop = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
var docHeight = $(currentDocument).height(); // This is the full document height.
var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}
использование jQuery
$(window).scrollTop();
получит вам положение прокрутки, вы можете затем работать оттуда, что процент основан на высоте окна.
существует также стандартное свойство DOM scrollTop
что вы можете использовать как document.body.scrollTop
однако я не уверен, как это ведет себя кросс-браузер, я бы предположил, что если есть несоответствия, то метод jQuery учитывает их.
Я нашел способ исправить предыдущий ответ, поэтому он работает во всех случаях. Тестировал на Chrome, Firefox и Safari.
(((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) || 0) * 100)