10

まず、このような驚くべき強力なライブラリを提供してくれた @prinzhorn に感謝します。私の質問: Web サイトのヘッダーに Skrollr 視差背景を実装しましたが、モバイル デバイス、特に iPhone などで表示するときにこの機能を無効にしたいと考えています。(最大幅: 767px)。これを行うにはどうすればよいでしょうか? そして、 destroy() 関数がこれを行うことができた場合、または別の手法を使用する必要がありますか? また、destroy() が答えの場合、どうすればこれを正しく実装できますか? 多くの感謝と例またはデモは大歓迎です。

4

6 に答える 6

26

Skrollrには独自のモバイルチェック機能があります

var s = skrollr.init();
if (s.isMobile()) {
    s.destroy();
}
于 2014-11-18T23:17:33.147 に答える
22

destroy() メソッドはそれを行います。また、最初から小さなウィンドウで skrollr を初期化することを回避したり、ウィンドウのサイズが小さくなった場合に skrollr を破棄したりすることもできます。

$(function () {
  // initialize skrollr if the window width is large enough
  if ($(window).width() > 767) {
    skrollr.init(yourOptions);
  }

  // disable skrollr if the window is resized below 768px wide
  $(window).on('resize', function () {
    if ($(window).width() <= 767) {
      skrollr.init().destroy(); // skrollr.init() returns the singleton created above
    }
  });
});

この例では、ウィンドウのサイズが大きく変更されても、skrollr は再度有効になりません。

于 2014-01-22T04:57:36.797 に答える
3

.destroy()メソッドは使用する正しいメソッドです。ただし、これは受け入れられた回答とは異なる方法でアプローチします。skrollr インスタンスを破棄するためにもう一度初期化する必要はなく、次の.get()ようにメソッドを使用してパフォーマンスを向上させることができます。

$(function () {
  // Init function
  function skrollrInit() {
    skrollr.init(yourOptions);
  }

  // If window width is large enough, initialize skrollr
  if ($(window).width() > 767) {
    skrollrInit();
  }

  // On resize, check window width, if too small
  // and skrollr instance exists, destroy;
  // Otherwise, if window is large enough
  // and skrollr instance does not exist, initialize skrollr.
  $(window).on('resize', function () {
    var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
    var windowWidth = $(window).width();

    if ( windowWidth <= 767 && _skrollr !== undefined ) {
      _skrollr.destroy();
    } else if ( windowWidth > 767 && _skrollr === undefined ) {
      skrollrInit();
    }
  });
});

Skrollr は、現在存在する場合は二度と初期化されず、存在する場合にのみ破棄されます。これにより、初期化と破棄の間の短い瞬間に見つかる可能性のあるバグを回避できます (これについては経験から話します)。

于 2016-03-29T00:20:51.333 に答える
2

場合によっては、トランジションを無効にするだけです:

@media only screen and (max-width: 480px){
    .divWithSkrollr{
        transform: none !important;
    }
}
于 2015-04-09T01:56:16.120 に答える
1

私にとっては、一部のモバイルで一部のエフェクトのみを無効にしたかったのです。応答性のために Bootstrap を使用していたため、モバイルで列が折りたたまれたときにデスクトップでのいくつかの効果が妨げられました。

私の解決策は、モバイルで作業したくないエフェクトのカスタム クラスを作成することでした。disable-mobile-skroll次に、skrollr が初期化される前に使用していたデータ属性を削除します。

if ($(window).width() < 768) {
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top');
};
// init Skrollr here
于 2016-09-28T11:42:40.723 に答える