Я пытаюсь реализовать такую функцию:
веб-страница имеет две колонки. узкий левый - с меню и некоторой информацией, а также широкий правый - с основным содержимым страницы. высота левого столбца намного меньше, чем правая
поэтому, когда пользователь прокручивает веб-страницу, а левая узкая колонна уже находится над окном просмотра, она скрывается, давая дополнительную ширину для правого столбца.
после того, как я скрою левый столбец, я должен немного прокрутить окно браузера, чтобы соответствующий элемент справа попал в верхнюю часть окна просмотра (он прыгает вверх, когда я скрываю левый столбец, потому что ширина правой колонки увеличивается)
Я реализовал это, но проблема заключается в плавной прокрутке во всех современных браузерах. при нажатии down
клавиши или page down
или mousewheel
или использовать свой палец в сенсорных устройствах, браузер генерирует много scroll
-events в течение одного свитка.
это выглядит так:
scrollTop == 500
scrollTop == 520
scrollTop == 530
scrollTop == 535
scrollTop == 537
и в тот момент, когда мой скрипт понимает, что левый столбец должен скрываться, соответствует scrollTop 500, и в этот самый момент мой скрипт пытается установить верхнюю часть прокрутки к новому значению, но он мгновенно переопределяется следующими событиями сглаживания браузера:
scrollTop == 500 //browser
scrollTop == 450 //mine! i need to save this position!
scrollTop == 520 //browser
scrollTop == 530 //browser
scrollTop == 535 //browser
scrollTop == 537 //browser
так как я могу отменить все изменения scrollTop ниже?
это мой код при необходимости:
$(function() {
//height of left column
window.main_left_height1 = $('#main_left_div').height();
var ar = $.grep($('.page_container > div'), function(item) {
return $(item).position().top >= window.main_left_height1;
});
//anchor element on the right which placed on the same height with the end of left col
window.main_left_anchor = ar[0];
//we will toggle left column on this scroll height
window.main_left_height1 = $(window.main_left_anchor).position().top;
window.main_left_state = true;
window.ignore_scroll = false;
window.ignore_scroll_value = -1;
});
if (is_mobile || true)
{
$(window).scroll(function(e) {
var scroll_top = $(this).scrollTop();
//i've tried to ignore browser scrolling after i set its value manually in the script but this doesn't work
if (window.ignore_scroll)
{
if (Math.abs(window.ignore_scroll_value - scroll_top) < 50)
{
window.ignore_scroll = false;
window.ignore_scroll_value = -1;
return true;
}
e.preventDefault();
return false;
}
if (window.main_left_state)
{
if (window.main_left_height1 && scroll_top >= window.main_left_height1)
{
$('#main_left').hide();
window.main_left_state = false;
if (!window.main_left_height2)
window.main_left_height2 = $(window.main_left_anchor).position().top;
window.ignore_scroll = true;
window.ignore_scroll_value = window.main_left_height2;
$(this).scrollTop(window.main_left_height2);
}
}
else
{
if (window.main_left_height2 && scroll_top < window.main_left_height2)
{
$('#main_left').show();
window.main_left_state = true;
window.ignore_scroll = true;
window.ignore_scroll_value = window.main_left_height1;
$(this).scrollTop(window.main_left_height1);
}
}
});
}
какие-либо предложения? благодарю!
Как я вижу, с тех пор, как браузер получил вход (например, прокрутку мыши или нажатие клавиши), и выдается событие прокрутки, вы ничего не можете с ним поделать. Если события будут сгенерированы, окно будет прокручиваться, и даже если произойдет смещение прокрутки перегруппировки страницы, это не будет изменено. Это означает, что у вас будет прыгающая прокрутка, если после изменения значения scrollTop.
Попытайтесь изменить положение правой колонки (сверху), а не scrollTop. Например, когда пользователь прокручивается вниз, и вы подсчитали, что scrollTop необходимо изменить для -60px, просто добавьте эти 60 пикселей в правую верхнюю панель (вы можете даже оживить его). Я думаю, это может помочь.
И второе предложение состоит в том, чтобы обрабатывать ввод с помощью мыши и клавиатуры самостоятельно для создания прокрутки, как это делается здесь: как временно отключить прокрутку? (НОЧЬ, я думаю :))