Question

我一直在制作一个网页，我有一个功能（固定div可滚动），需要一些javascript，我找到了一种方法，使它与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？

任何帮助，粗略的方向等都会很棒！

Answer 1

好的 - 我自己找到了答案。我是这样做的：

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的情况下选择所有类。

如何在没有jquery的情况下使这个（可滚动的div）工作？

1 个答案: