スライディング水平応答レイアウトとマウスホイール入力

私はスライディング水平レイアウトにヘッダーバナーを実装しようとしています。スライディング水平応答レイアウトとマウスホイール入力

これはHTML構造である：

<body> 
    <div id="header"> 
    <div><a href="#one"> one </a></div> 
    <div><a href="#two"> two </a></div> 
    <div><a href="#thr"> thr </a></div> 
    </div> 

    <div id="one" class="panel"> </div> 
    <div id="two" class="panel"> </div> 
    <div id="thr" class="panel"> </div> 
</body>

ヘッダが固定され、パネルは（中央のパネルは、デバッグ目的のために、異なる色を有する）勾配背景が提供されています。ここはCSSです：

body { 
     width: 6000px; 
     overflow: hidden; 
    } 

    .panel { 
     width: 33.3%; 
     float: left; 
     padding-left: 30px; 
     padding-right: 1040px; 
     margin-top: -75px; 
     height: 960px; 
     background-image: linear-gradient(to bottom, #0B88FF, #95EEFF); 
    } 

    #header { 
     position: fixed; 
     height: 75px; 
     margin-top: 25px; 
    } 

    #two{ 
     background-image: linear-gradient(to bottom, #0B8800, #9E5EFF); 
    }

そして最後に、パネル間のアニメーションを管理機能：

$(document).ready(function() { 
    $("#header a").bind("click", function(event) { 
    event.preventDefault(); 
    var target = $(this).attr("href"); 
    $("html, body").stop().animate({ 
     scrollLeft: $(target).offset().left, 
     scrollTop: $(target).offset().top 
    }, 1200); 
    }); 
});

私が直面してる問題は、以下の通りである：

1）私がしようとしましたユーザーがマウスホイールを使用しているときにスライドアニメーションを実行するためのjQuery関数を実装しますが、テストは機能しません...構造は常に同じです：

$(window).scroll(function() { 
     if ($(this).scrollTop() > 0) { 
     var target // still not able to figure out who should i target 
     $("html, body").stop().animate({ 
      //to the target >,< 
     } 
});

2）私のブラウザのウィンドウが100％である場合には、サイズすべてがうまく動作しているようですが、私は減らすか、> < をズームすべての混乱を増やす場合、私はこれを処理することが可能である気づき、そしてhere is an example:

出典

2016-02-23 Koop4

あなたのターゲットを得るには、配列をpanelクラスの要素で埋めて、インデックスを使ってパネルを移動します。あなたは、ウィンドウのサイズ変更にスクロールに問題がある場合は

最後に、あなたはこのeventを結合して、あなたが

がMouseWheelEventを見てみましょうやりたいことができます。

そして、あなたのコードでこの例を試してみてください解明に

$(document).ready(function() { 
 
    $("#header a").bind("click", function(event) { 
 
    event.preventDefault(); 
 
    var target = $(this).attr("href"); 
 
    $("html, body").stop().animate({ 
 
     scrollLeft: $(target).offset().left, 
 
     scrollTop: $(target).offset().top 
 
    }, 1200); 
 
    }); 
 
    
 
    var scroll_targets = $(".panel"); 
 
    var scroll_targets_index = 0; 
 
    $(window).on('DOMMouseScroll mousewheel', function (e) {  
 
    if (e.originalEvent.wheelDelta < 0) { 
 
     if(scroll_targets_index < scroll_targets.length-1){ 
 
     var where = ++scroll_targets_index; 
 
     $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     } 
 
    } 
 
    else { 
 
    \t var where; 
 
    \t if(scroll_targets_index > 0){ 
 
     \t where = --scroll_targets_index; 
 
     } 
 
     else{ 
 
     \t where = 0; 
 
     } 
 
     \t $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     
 
    } 
 
    }); 
 
    
 
    $(window).resize(function() { 
 
    $('html,body').scrollTop($(scroll_targets[where]).offset().top); 
 
    $('html,body').scrollLeft($(scroll_targets[where]).offset().left); 
 
    }); 
 
});

#body { 
 
     width: 6000px; 
 
     overflow: hidden; 
 
    } 
 

 
    .panel { 
 
     width: 33.3%; 
 
     float: left; 
 
     padding-left: 30px; 
 
     padding-right: 1040px; 
 
     margin-top: -75px; 
 
     height: 960px; 
 
     background-image: linear-gradient(to bottom, #0B88FF, #95EEFF); 
 
    } 
 

 
    #header { 
 
     position: fixed; 
 
     height: 75px; 
 
     margin-top: 25px; 
 
    } 
 

 
    #two{ 
 
     background-image: linear-gradient(to bottom, #0B8800, #9E5EFF); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
    <div id="header"> 
 
    <div><a href="#one"> one </a></div> 
 
    <div><a href="#two"> two </a></div> 
 
    <div><a href="#thr"> thr </a></div> 
 
    </div> 
 

 
    <div id="one" class="panel"> </div> 
 
    <div id="two" class="panel"> </div> 
 
    <div id="thr" class="panel"> </div> 
 
</div>

出典

2016-03-02 12:22:48 jolmos

、私はこれがtransform3dや他のいくつかのCSSのトリックを使用してCSSとJavaScriptで作られたと思います。スクロールイベントを取得したい場合は、オーバーフローが発生している間は表示されません。だから、私はあなたが今抱えている問題を解決するために行うことを試みたものを、このような働きをマウスホイールイベントを、使用していた：

$(window).on('wheel', function (event) {  
    console.log(event); // Here you can see all of its events properties and functions in the console 
});

あなたが前方にマウスホイールを行っている場合は120を返しwheelDeltaプロパティがあります

$(window).on('wheel', function (event) {  

    if (event.originalEvent.wheelDelta/120 > 0) { 
     count++; 
     console.log(count) ; 
     if(count > 30){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
     } 
     if(count > 60){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#thr').offset().left, 
       scrollTop: $('#thr').offset().top 
      }, 1200);    
     } 
     if(count > 90){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
      count = 0;   
     } 


    } 
});

これは、あなたがたときにマウスホイール構築するためのロジックの作成を続行するだけのためである：後方マウスホイールをやったときに、私が知っていることができるように、または-120は、私はマウスホイールイベントがトリガ回数カウンタを添付しました別のパネルに変更されるなど、幸運を祈る！

出典

2016-03-06 07:24:53 Leo

スライディング水平応答レイアウトとマウスホイール入力

答えて

関連する問題