Javascript 由于浏览器的平滑滚动，如何忽略大量的滚动事件？

我正在尝试实现这样一个功能：

该网页有两列。左边窄的一个-菜单和一些信息，右边宽的一个-页面的主要内容。左列的高度比右列小得多

因此，当用户向下滚动网页时，左窄列已经位于视口上方，它会被隐藏，从而为右列提供额外的宽度

隐藏左栏后，我应该将浏览器窗口向上滚动一点，以便将右侧的对应元素放置在视口顶部（当我隐藏左栏时，它向上跳跃，因为右栏的宽度增加）

我已经实现了这一点，但问题在于在所有现代浏览器中平滑滚动。当您按下

向下

键或

向下翻页

或

鼠标滚轮

或使用手指触摸设备时，浏览器会在一次滚动期间生成大量

滚动

-事件

看起来是这样的：

scrollTop == 500
scrollTop == 520
scrollTop == 530
scrollTop == 535
scrollTop == 537

当我的脚本意识到左列应该隐藏时，对应于scrollTop为500，此时我的脚本尝试将scroll top设置为新值，但它立即被以下浏览器smoothscroll事件覆盖：

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);
      }
    }

  });
}

$（函数（）{
//左柱高度
window.main_left_height1=$（'main_left_div'）.height（）；
var ar=$.grep（$（'.page_container>div'），函数（项）{
return$（item）.position（）.top>=window.main\u left\u height1；
});
//位于右侧的锚定元件，其与左柱端部位于同一高度
window.main_left_anchor=ar[0]；
//我们将在此滚动高度上切换左列
window.main\u left\u height1=$（window.main\u left\u锚点）.position（）.top；
window.main\u left\u state=true；
window.ignore\u scroll=false；
window.ignore\u scroll\u值=-1；
});
如果（是否为| | |真）
{
$（窗口）。滚动（功能（e）{
var scroll_top=$（this.scrollTop（）；
//在脚本中手动设置浏览器滚动值后，我尝试忽略它，但这不起作用
如果（窗口忽略\u滚动）
{
if（Math.abs（window.ignore\u scroll\u value-scroll\u top）<50）
{
window.ignore\u scroll=false；
window.ignore\u scroll\u值=-1；
返回true；
}
e、 预防默认值（）；
返回false；
}
if（窗口主窗口左窗口状态）
{
如果（window.main\u left\u height1&&scroll\u top>=window.main\u left\u height1）
{
$（'#main_left'）.hide（）；
window.main\u left\u state=false；
如果（！window.main_left_height 2）
window.main\u left\u height2=$（window.main\u left\u锚点）.position（）.top；
window.ignore\u scroll=true；
window.ignore\u scroll\u value=window.main\u left\u height2；
$（此）.scrollTop（window.main\u left\u height2）；
}
}
其他的
{
if（window.main\u left\u height2&&scroll\u top

---

有什么建议吗？谢谢

正如我看到的，由于浏览器获得了输入（如鼠标滚动或按键），并且生成了滚动事件，所以您对此无能为力。若事件被生成，窗口将被滚动，即使页面重新排列，滚动偏移量也不会改变。这意味着，如果在之后更改scrollTop值，将出现跳跃式滚动

尝试更改右列位置（顶部），而不是滚动顶部。例如，当用户向下滚动时，您计算出scrollTop需要更改为-60px，只需将这些60px添加到右侧面板的顶部（您甚至可以设置动画）。我想这可能会有帮助

---

第二个建议是自己处理鼠标和键盘输入以生成滚动，就像这里所做的：（噩梦！我想：）

也许你可以限制滚动event@adeneo我正试着这么做，但如何确定何时我应该停止这样做？也许会对你有所帮助？@Teemu看起来很有趣，但错误的超时会让用户生气）当我在手机上快速滑动页面时，它会先滚动到页面的末尾，然后跳到我需要的位置