Событие прокрутки элемента блокировки

Question

У меня есть меню прокрутки (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); 

    }); 


} 

Answer 1

Вы можете использовать что-то вроде pointer-events в css.

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

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

http://caniuse.com/pointer-events

EDIT Если вы хотите пойти дальше, то это также стоит посмотреть:

https://github.com/polymer/PointerEvents

Answer 2

Вы можете добавить это ваша страница:

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