ユーザーがスクロールした後にスクロールバーを表示する方法は？

私はスクロールバーを非表示にして、ビジターがスクロールした後に再び表示しようとしています。 HTML & JSユーザーがスクロールした後にスクロールバーを表示する方法は？

<body onscroll="scrollable()" style="overflow: hidden;"> 
    ... 
    <script> 
    function scrollable() { 
     document.body.style.overflow = "auto"; 
     /* If this makes any sense... */ 
    } 
    </script> 
</body>

スニペット

function scrollable() { 
 
    document.body.style.overflow = "auto"; 
 
}

.enablescrolling { 
 
    height: 10000px; 
 
    background-color: red; 
 
    width: 100%; 
 
}

<body onscroll="scrollable()" style="overflow: hidden;"> 
 
    ... 
 
    <br>I didn't saw any errors in the console 
 
    <div class="enablescrolling"></div>

pleseは、助けて！どんなアイデアも歓迎です！私はそれを解決できません！これは2日から！事前にありがとう！

出典

2017-02-22 Zeus Zdravkov

何のアクション（複数可）を使用すると、スクロールバーの初期不在下での「スクロール」としての資格でしょうか？マウスホイール？下/上矢印？タッチイベント？いずれにしても、それらのイベントを聞き、それに応じて必要な動作を適用する必要があります。 – sbeliv01

ユーザーがスクロールするすべてのスクロールを非表示にするようにオーバーフローを変更すると、ページが調整され、要素が左右に移動します。 –

オーバーフローを適用した後：隠し、スクロールイベントは起動しません –

オーバーフローが隠されているとスクロールできず、スクロールできない場合はスクロールイベントが発生しないため、関数が呼び出されません。

wheelイベントのように、マウスホイールを回転させたときにトリガーする他のイベントを聴くことができます。

document.addEventListener("wheel", scrollable); 
 

 
function scrollable(evt) { 
 
    document.body.style.overflow = "auto"; 
 
}

.enablescrolling { 
 
    height: 10000px; 
 
    background-color: red; 
 
    width: 100%; 
 
}

<body style="overflow: hidden;"> 
 
    ... 
 
    <br>I didn't saw any errors in the console 
 
    <div class="enablescrolling"></div>

出典

2017-02-22 17:49:55

生命維持装置！これは完全に動作します！ –

タッチスクリーンデバイス：後で現れる問題があります。どんな解決策ですか？ –

私が言及したように、あなたは他のイベントを聞く必要があります。 'wheel'イベントは単なるイベントです。タッチについては、より複雑になります。あなたはたぶん 'スワイプ'イベントにフックしたいかもしれませんが、ネイティブには存在しません。これは役立つ可能性があります：http://stackoverflow.com/questions/17567344/detect-left-right-swipe-on-touch-devices-but-allow-up-down-scrolling –

スコット・マーカスからグレート答え。

もう1つの方法は、擬似クラス::-webkit-scrollbarでスクロールバーを非表示にし、スクロール時にそのクラスを削除することです。

function showScrollbar() { 
 
    document.body.className = ""; 
 
}

.enablescrolling { 
 
    height: 10000px; 
 
    background-color: red; 
 
    width: 100%; 
 
} 
 

 
.hideScrollbar::-webkit-scrollbar { 
 
    display: none; 
 
}

<body onscroll="showScrollbar()" class="hideScrollbar"> 
 
    ... 
 
    <br>I didn't saw any errors in the console 
 
    <div class="enablescrolling"></div> 
 
</body>

出典

2017-02-22 17:56:31

作品！ありがとうございますが、pseudo :: - webkit-scrollbarはWebkitブラウザでのみ動作します。 –

ユーザーがスクロールした後にスクロールバーを表示する方法は？

答えて

関連する問題