1

プログレスバーを表示する必要があるサイトで scrollMagic ライブラリを使用しています。バーには、ページ上のユーザーの位置が表示されます。プログレス バーの幅は、ユーザーが上下にスクロールすると変化します。scrollMagic ライブラリで動作させることができないようです。これは私がとりわけ試したことです。ありがとう！

var controller = new ScrollMagic.Controller();
$(function progressBar() {
  var tween = TweenMax.fromTo("#progress", 1, {
    width: "0%"
  }, {
    width: "100%"
  });
  var scene = new ScrollMagic.Scene({
      triggerElement: ".header-wrap",
      duration: "100%"
    })
    .setTween(tween)
    .addTo(controller);
});
4

3 に答える 3

3

理解するのに少し時間がかかりました。解決策を探している人に役立つことを願っています.

スクロール マジックの進行方法を使用する必要があります。

.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width',progressvalue +"%");
})

これがコード全体です。

var pin = new ScrollMagic.Scene({
    triggerHook: "onLeave",
    duration: "1100%",
    triggerElement: "#pin"
})
.setPin("#pin")
.setTween(tl)
.setClassToggle("#pin", "active")
// Add this code
.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width', progressvalue + "%");
})
.addTo(controller);

html で、進行状況を表示する div を追加します。

<div class="scroll-progress" style="width:0%; height:5px; background:#0090c6; position:fixed; bottom:0; left:0; z-index:9999"></div>
于 2018-10-10T10:57:43.530 に答える
1

これがどれだけ役立つかわかりませんが、'mousewheel' イベントを試してみてください:

window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? false : true;
if(wDelta)
    <mousewheel goes up>
else
    <mousewheel goes down>
});

または、ユーザーがスクロールする方向を気にしない場合は、 onscroll 属性さえあります。

<body onscroll="doStuff()">

オンスクロールの詳細

于 2015-06-29T20:31:17.163 に答える