元素阻塞滚动事件

我有一个滚动菜单（ul），当它悬停在列表项上时，会创建一个悬停副本。当元素溢出时，该菜单有一个滚动条。由于悬停副本的顶部和左侧与列表项目完全相同，因此会阻止菜单滚动。元素阻塞滚动事件

这里是我使用的代码，以及jsfiddle。小提琴的风格如此使用，我会后下面的代码为快速参考

相关的Html（批号李时珍的造成溢出）：

<div class='popup'> 
    <div class="page"> 
     <div class="pagescroll"> 
      <ul> 
       <li class="li-page">Hovering</li> 

       ... 

       <li class="li-page">Hovering</li> 
      </ul> 
     </div> 
     <ul class="noteslist"> 
      <li class="box contents-selected"> 
       <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p> 
      </li> 
      <li class="box contents-selected"> 
       <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p> 
      </li> 
      <li class="box contents-selected"> 
       <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p> 
      </li> 
      <li class="box contents-selected"> 
       <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p> 
      </li> 
      <li class="box contents-selected"> 
       <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p> 
      </li> 
     </ul> 
    </div> 
</div>

的Javascript：

PageHoverActions(); 

function PageHoverActions() { 

    var fontAnimateTimer; 
    //Adds hover 
    $('.li-page').on('mouseover', function (e) { 
     if (fontAnimateTimer) { 
      window.clearInterval(fontAnimateTimer); 
     } 

     var el, hoverel, fontSize, rect; 
     el = this; 
     rect = el.getBoundingClientRect(); //rect alows us to position things beautifully 
     fontSize = 12; 


     $('.li-page-hover').remove(); 
     //hoverel is the hovering element 
     hoverel = $(this) 
      .clone() 
      .addClass('li-page-hover') 
      .css({ 
      'top': rect.top, 
       'left': rect.left 
     }) 
      .appendTo(document.body) 
      .click(PageClickActions); 
     //Magnifies text 
     fontAnimateTimer = window.setInterval(function() { 
      if (fontSize < 20) { 
       hoverel[0].style.fontSize = fontSize + 'pt'; 
       fontSize++; 
      } else { 
       window.clearInterval(fontAnimateTimer); 
      } 
     }, 20); 

    }); 


}

来源

2014-02-12 aclave1

你可以在css中使用类似pointer-events的东西。

.li-page-hover { 
    pointer-events: none; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

http://caniuse.com/pointer-events

编辑如果你想走得更远，这也是值得看：

https://github.com/polymer/PointerEvents

来源

2014-02-12 02:39:21

哇。那是什么样的巫术？ – bjb568

它的工作wizardry css3 powah，但不幸的是，并非如此x-浏览器... –

听起来很酷...现在做我自己的测试... – bjb568

您可以将它添加到你的页面：

.li-page-hover { 
    pointer-events: none; 
    cursor: pointer; /* if you want to keep your cursor as a pointer */ 
}

来源

2014-02-12 02:41:21 danwarfel

元素阻塞滚动事件

回答

相关问题