如何使這個（可滾動div）工作沒有jQuery？

我一直在做一個網頁，我有一個功能（使固定div滾動），需要一些JavaScript，我發現了一種方法，使其與jQuery的工作，但不能讓它沒有它的工作。任何幫助，將不勝感激。這裏是代碼：如何使這個（可滾動div）工作沒有jQuery？

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script> 
<script type='text/javascript'> 
    // A globar variable to save to last element that the following class was applied to 
    var Last; 
    // This adds the class "ttth" so that tt the class "tt" will be displayed. 
    $(".tttw").live('touchstart', function() { 
    if (Last) Last.removeClass('ttth'); 
    $(this).addClass("ttth"); 
    Last=$(this); 
    }); 
    // Test if we have a touchdevice. 
    function isTouchDevice(){ 
    try{ 
     document.createEvent("TouchEvent"); 
     return true; 
    }catch(e){ 
     return false; 
    } 
    } 
    // This function makes a fixed div on touch devices scrollable. 
    function touchScroll(selector) { 
    if (isTouchDevice()) { 
     var scrollStartPosY=0; 
     var scrollStartPosX=0; 
     $('body').delegate(selector, 'touchstart', function(e) { 
     scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY; 
     scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX; 
     }); 
     $('body').delegate(selector, 'touchmove', function(e) { 
     if ((this.scrollTop < this.scrollHeight-this.offsetHeight && 
      this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) || 
      (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5)) 
      e.preventDefault(); 
     if ((this.scrollLeft < this.scrollWidth-this.offsetWidth && 
      this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) || 
      (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5)) 
      e.preventDefault(); 
     this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY; 
     this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX; 
     }); 
    } 
    } 
    // Touch is being initialised. 
    $(document).ready(function(){ 
    touchScroll('.tt'); 
    }); 
</script>

此代碼已經工作，但要減少我想擺脫jQuery的加載時間。怎麼做？例如 - 我如何選擇所有類「tttw」並添加一個eventlistener？

任何幫助，粗略方向等將是偉大的！

來源

2012-11-25 M K

我懷疑，避免jQuery在啓動時間上會有很大的不同。將自己的代碼移動到單獨的文件中以便可以緩存它會更好。 – Pointy

您是否真的測量了加載時間，並確認緩慢加載是因爲jQuery？ – JJJ

@Juhana：不 - 我沒有測量過，但會減小需要加載的大小。 –

好的 - 自己找到答案。我這樣做是這樣的：

function touchScrolli(selector) { 
    if (isTouchDevice()) { 
    var scrollStartPosY=0; 
    var scrollStartPosX=0; 
    var list = document.querySelectorAll(selector); 
    for (var i = 0; i < list.length; i++) { 
    list[i].addEventListener('touchstart', function (e) { 
    scrollStartPosY=this.scrollTop+e.touches[0].pageY; 
    scrollStartPosX=this.scrollLeft+e.touches[0].pageX; 
    e.preventDefault(); 
    }, false); 
    list[i].addEventListener('touchmove', function (e) { 
    if ((this.scrollTop < this.scrollHeight-this.offsetHeight && 
    vthis.scrollTop+e.touches[0].pageY < scrollStartPosY-5) || 
    (this.scrollTop != 0 && this.scrollTop+e.touches[0].pageY > scrollStartPosY+5)) 
    e.preventDefault(); 
    if ((this.scrollLeft < this.scrollWidth-this.offsetWidth && 
    this.scrollLeft+e.touches[0].pageX < scrollStartPosX-5) || 
    (this.scrollLeft != 0 && this.scrollLeft+e.touches[0].pageX > scrollStartPosX+5)) 
    e.preventDefault(); 
    this.scrollTop=scrollStartPosY-e.touches[0].pageY; 
    this.scrollLeft=scrollStartPosX-e.touches[0].pageX; 
    }); 
    } 
    } 
}

只需要知道如何選擇所有類，而jQuery的。

來源

2012-11-27 22:14:05

如何使這個（可滾動div）工作沒有jQuery？

回答

相關問題