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

Question

我想通过点击 html 页面中的 link 来触发 scroll event。使用 JS 我可以在 window 上阻止滚动但是当我 return 到 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 Download JS Velocity

的 J 连接

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。

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

Enable and disable mouse scroll by clicking on an element

javascript

jquery

events

scroll

event-handling