как игнорировать множество скролл-событий из-за плавной прокрутки браузера?

0

Я пытаюсь реализовать такую функцию:

веб-страница имеет две колонки. узкий левый - с меню и некоторой информацией, а также широкий правый - с основным содержимым страницы. высота левого столбца намного меньше, чем правая

поэтому, когда пользователь прокручивает веб-страницу, а левая узкая колонна уже находится над окном просмотра, она скрывается, давая дополнительную ширину для правого столбца.

после того, как я скрою левый столбец, я должен немного прокрутить окно браузера, чтобы соответствующий элемент справа попал в верхнюю часть окна просмотра (он прыгает вверх, когда я скрываю левый столбец, потому что ширина правой колонки увеличивается)

Я реализовал это, но проблема заключается в плавной прокрутке во всех современных браузерах. при нажатии 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);
      }
    }

  });
}

какие-либо предложения? благодарю!

  • 0
    Может быть, вы могли бы ограничить событие прокрутки
  • 0
    @adeneo Я пытаюсь это сделать, но как определить момент, когда я должен остановиться на этом?
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ

Как я вижу, с тех пор, как браузер получил вход (например, прокрутку мыши или нажатие клавиши), и выдается событие прокрутки, вы ничего не можете с ним поделать. Если события будут сгенерированы, окно будет прокручиваться, и даже если произойдет смещение прокрутки перегруппировки страницы, это не будет изменено. Это означает, что у вас будет прыгающая прокрутка, если после изменения значения scrollTop.

Попытайтесь изменить положение правой колонки (сверху), а не scrollTop. Например, когда пользователь прокручивается вниз, и вы подсчитали, что scrollTop необходимо изменить для -60px, просто добавьте эти 60 пикселей в правую верхнюю панель (вы можете даже оживить его). Я думаю, это может помочь.

И второе предложение состоит в том, чтобы обрабатывать ввод с помощью мыши и клавиатуры самостоятельно для создания прокрутки, как это делается здесь: как временно отключить прокрутку? (НОЧЬ, я думаю :))

  • 0
    о чувак, хорошая идея! благодарю вас!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню