通过单击一个元素来启用和禁用鼠标滚动

Question

我想触发一个scroll event点击一个小链接在我的html页面。使用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连接到这个JS叫做Velocity。JS下载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");  
});

更新: