純粋な JavaScript は、単純なプルダウン更新関数を実装します_JavaScript スキル

コードは非常にシンプルですが、実装されている機能は非常に実用的です。コードを直接提供します

。

CSS:

コードをコピーします コードは次のとおりです:

<スタイル>
div{
位置: 絶対;
トップ:0px;
下:0px;
幅:100%;
左:0px;
オーバーフロー: 非表示;
}
リ{
リスト スタイル タイプ: なし;
高さ:35px;
背景: #ccc;
境界線の下: 実線 1px #fff;
テキスト配置: 左;
行の高さ: 35px;
padding-left:15px;
}
ウル{
幅:100%;
margin-top:0px;
位置: 絶対;
左:0px;
パディング:0px;
トップ:0px;
}

HTML:

コードをコピー コードは次のとおりです:

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

        
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

   

<スクリプト>
   varscroll = document.querySelector('.scroll');
   var innerScroller = document.querySelector('.outerScroller');
   var touchStart = 0;
   var touchDis = 0;
   externalScroller.addEventListener('touchstart', function(event) {
        var touch = イベント.targetTouches[0];
        // ハンドル元素放手指の位置
           touchStart = touch.pageY;
           console.log(touchStart);
        }, false);
   externalScroller.addEventListener('touchmove', function(event) {
        var touch = イベント.targetTouches[0];
        console.log(touch.pageY 'px'); 
        スクロール.スタイル.トップ = スクロール.オフセットトップ touch.pageY-touchStart 'px';
        console.log(scroll.style.top);
        touchStart = touch.pageY;
        touchDis = touch.pageY-touchStart;
        }, false);
   externalScroller.addEventListener('touchend', function(event) {
        touchStart = 0;
        var top =scroll.offsetTop;
        console.log(トップ);
        if(top>70)refresh();
        if(top>0){
            var time = setInterval(function(){
              スクロール.スタイル.トップ = スクロール.オフセットトップ -2 'px';
              if(scroll.offsetTop             },1)
        }
    }, false);
   関数refresh(){
    for(var i = 10;i>0;i--)
        {
            var node = document.createElement("li");
            node.innerHTML = "初心者です";
            scroll.insertBefore(node,scroll.firstChild);
        }
   }

以上がこの記事の全内容です。JavaScript を学習する皆さんのお役に立てれば幸いです。