Question

我会通过点击我的html页面中的一个小链接来触发scroll event。使用JS，我可以阻止在窗口上滚动，但当我返回data-click-state 1时，我无法滚动

以下是代码：

$('#lista-food').on('click',function(){

  if($(this).attr('data-click-state') == 1) {
    $(this).attr('data-click-state', 0)

    $("#lista_ul-food").addClass( "top_enter-food" );
    $("ul#lista_ul-food").addClass("active");
    $("body").addClass("overflow-hidden");
    $(".top-lista").addClass("top-animate");
    $(".mid-lista").addClass("mid-animate");
    $(".bottom-lista").addClass("bottom-animate");

    $(document).unbind("keydown mousewheel DOMMouseScroll");
    $(window).unbind("keydown mousewheel DOMMouseScroll");

  } else {
    $(this).attr('data-click-state', 1)

    $("#lista_ul-food").removeClass( "top_enter-food" );
    $("ul#lista_ul-food").removeClass("active");
    $("body").removeClass("overflow-hidden");
    $(".top-lista").removeClass("top-animate");
    $(".mid-lista").removeClass("mid-animate");
    $(".bottom-lista").removeClass("bottom-animate");

    $(window).bind("mousewheel DOMMouseScroll" );
    $(document).on("keydown mousewheel DOMMouseScroll");
  }     
});

我的JS连接这个名为Velocity.js的{J} Download JS Velocity

Answer 1

试试这个：

$('#lista-food').on('click',function(){
  function myfunc(event){
    event.preventDefault();
  }

  if($(this).attr('data-click-state') === "1") {
    $(this).attr('data-click-state', "0");

    $(document).on("keydown mousewheel DOMMouseScroll", myfunc);
    $(window).on("keydown mousewheel DOMMouseScroll", myfunc);

  } else {
    $(this).attr('data-click-state', "1")

    $(document).unbind("keydown mousewheel DOMMouseScroll");
    $(window).unbind("keydown mousewheel DOMMouseScroll");
  }

  $("#lista_ul-food").toggleClass( "top_enter-food" );
  $("ul#lista_ul-food").toggleClass("active");
  $("body").toggleClass("overflow-hidden");
  $(".top-lista").toggleClass("top-animate");
  $(".mid-lista").toggleClass("mid-animate");
  $(".bottom-lista").toggleClass("bottom-animate");  
});

<强>更新

请看这个有效fiddle。

单击元素启用和禁用鼠标滚动

1 个答案: