元素阻塞滾動事件

我有一個滾動菜單（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

元素阻塞滾動事件

回答

相關問題