質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

パララックjsでスマホ時も上下スワイプで動かせる書き方を教えて頂きたいです。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 135

nido

score 2

 前提・実現したいこと

JS初心者なので教えて頂きたいです。
これにマウスホイールイベントの他にスマホやタブレットでの
上下スワイプでも動くようにしたいのですが、どのように書けば良いでしょうか?

 該当のソースコード

$(function () {
contents = $("#contents");
nav = $("#nav ul");
num = 0;
contentset();
function contentset() {
var wrapper  = $("#wrapper");
winhight = $(window).height();
navheight = (winhight - nav.height()) / 2;
wrapper.css("height", winhight);
$("#nav").css("top", navheight);
}

nav.children("li").click(function(){
nav.children("li").removeClass("selected");
$(this).addClass("selected");
movecontent();
var num = nav.children("li").index(nav.children(".selected"));
animcontent(num);
});
function movecontent() {
var content = $("article");
var num = nav.children("li").index(nav.children(".selected"));
contentmgn = $("article").height();
contentmgn = -(num * contentmgn);
contents.animate({"top": contentmgn}, 1000, "easeInOutExpo");
}
$(".prev").click(function(){
var btnslect = nav.children("li").index(nav.children(".selected")) - 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(btnslect).addClass("selected");
movecontent();
return false;
animcontent(num);
});
$(".next").click(function(){
var btnslect = nav.children("li").index(nav.children(".selected")) + 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(btnslect).addClass("selected");
movecontent();
return false;
animcontent(num);
});
$(".top").click(function(){
nav.children("li").removeClass("selected");
nav.children("li").eq(0).addClass("selected");
movecontent();
return false;
animcontent(num);
});

$(function(){
  var box = $("html,body")[0];
  box.addEventListener("touchmove", touchHandler, false);
  box.addEventListener("touchend", touchHandler, false);
});
function touchHandler(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(e.type == "touchmove"){

  }
  if(e.type == "touchend"){

  }
}


$("html,body").mousewheel(function(){
  if($('#nav ul').children('li:nth-child(1)').hasClass('selected')){
    $('.main').removeClass("move");
  }
  else {
    $('.main').addClass("move");
  }
});
$("html,body").mousewheel(function(){
  if($('#nav ul').children('li:nth-child(2)').hasClass('selected')){
    $('.main').addClass("move");
  }
  else {

  }
});



$("html,body").mousewheel(function(event, delta, deltaX, deltaY) {
if(!contents.is(":animated")) {
if(delta < 0) {
if(nav.children("li").eq(5).attr("class") !== "selected") {
var select1 = nav.children("li").index(nav.children(".selected")) + 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(select1).addClass("selected");
movecontent();
var num1 = nav.children("li").index(nav.children(".selected"));
animcontent(num1);
}
} else if(delta > 0) {
if(nav.children("li").eq(0).attr("class") !== "selected") {
var select2 = nav.children("li").index(nav.children(".selected")) - 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(select2).addClass("selected");
movecontent();
var num2 = nav.children("li").index(nav.children(".selected"));
animcontent(num2);
}
}
event.preventDefault();
}
});
});



/*------------------------------------------------------------------*/
$(window).load(function() {
//画面高さ取得
h = $(window).height();
h2 = h - 0;
$("#contents #main article").css("min-height", h + "px");
$("#contents #main article section").css("min-height", h2 + "px");
});
$(window).resize(function() {
//画面リサイズ高さ取得
h = $(window).height();
h2 = h - 0;
$("#contents #main article").css("min-height", h + "px");
$("#contents #main article section").css("min-height", h2 + "px");
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。