검도 모바일 목록보기에서 마우스 스크롤을 허용하는 방법이 있습니까?

Question

목록보기가있는 모바일 페이지에서 '스크롤'하는 유일한 방법은 클릭하여 드래그하는 것입니다.

데스크톱에서 모바일 사이트를 사용하는 사람들에게 마우스 휠을 사용하여 일반적인 스크롤을 허용 할 수있는 방법이 있습니까?

Answer 1

다음은 kendo mobile with jquery.mousewheel.js를 사용하여 웹 응용 프로그램에서 마우스 휠을 사용하여 모바일보기 스크롤을 만드는 방법입니다.

보기 :

<div data-role="view" id="tabstrip-editor" data-init="attachToScroller"> 
<ul data-role="listview" data-style="inset" data-type="group"> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul></div> 

자바 스크립트 :

function matrixToArray(matrix) { 
    return matrix.substr(7, matrix.length - 8).split(', '); 
} 

function attachToScroller(e) { 
    var scroller = e.view.scroller; 

    e.view.scroller.element.find('.km-scroll-container').mousewheel(function (event, delta, deltaX, deltaY) { 
     event.preventDefault(); 
     var matrix = matrixToArray($(event.currentTarget).css("-webkit-transform")); 
     var currentScroll = parseInt(matrix[5], 10); 
     var scrollingamount = currentScroll + deltaY * 15; 
     if (deltaY > 0) {    
      if (-currentScroll > 9) 
       scroller.scrollTo(0, scrollingamount); 
      else 
       scroller.scrollTo(0, 0); 
     } 
     else { 
      var maximum = scroller.scrollHeight() - $(scroller.element).height(); 
      if(maximum + currentScroll > 0) 
       scroller.scrollTo(0, scrollingamount); 
      else 
       scroller.scrollTo(0, -maximum); 
     } 
    }); 
} 

Fiddle Demo Here

및

(크롬)

Fiddle Demo with Modernizr

(뿐만 아니라 다른 브라우저 용)

view init 중에 scroller 컨테이너를 jquery.mousewheel 이벤트에 연결합니다. jquery.mousewheel 이벤트가 도착하면 현재 Y 변환이 무엇인지 배우려면 스크롤러 컨테이너의 -transform css 속성을 가져와야합니다 (검도 모바일 스크롤러는 -transform을 사용하여 자체 위치 지정). 그런 다음, 스크롤러의 scrollTo 메소드를 호출하여 mousewheel의 delta 속성에 따라 위 또는 아래로 스크롤합니다.