2017-02-17 5 views
1

oben/unten Pfeil Scroll funktioniert nicht in jquery Scrollen Plugin.Ich möchte den Bildlauf mit beiden Seite hoch/runter-Taste und in auf/ab Pfeil klicken klicken. Seite nach oben/Pfeil nach unten funktioniert gut, wie ich expect.up/Ab-Taste, klicken Sie nicht als Seite blättern blätternoben/unten Pfeil Scroll funktioniert nicht

  if(e.keyCode==33) { //working 

       if(index>0) { 
        if(atTop()) { 
         e.preventDefault(); 
         index--; 
         //index, instant, callbacks 
         animateScroll(index,false,true); 
        } 
       } 
      } else if(e.keyCode==34) { //working 
       if(index<heights.length-1) { 
        if(atBottom()) { 
         e.preventDefault(); 
         index++; 
         //index, instant, callbacks 
         animateScroll(index,false,true); 
        } 
       } 
      } 
      if(e.keyCode==38) { //not working 
       if(index>0) { 
        if(atTop()) { 
         e.preventDefault(); 
         index--; 
         //index, instant, callbacks 
         animateScroll(index,false,true); 
         console.log('up arrow'); 
        } 
       } 
      } else if(e.keyCode==40) { //not working 
       if(index<heights.length-1) { 
        if(atBottom()) { 
         e.preventDefault(); 
         index++; 
         //index, instant, callbacks 
         animateScroll(index,false,true); 
         console.log('down arrow'); 
        } 
       } 
      } 

/*! 
 
* jQuery Scrollify 
 
* Version 1.0.5 
 
* 
 
* Requires: 
 
* - jQuery 1.7 or higher 
 
* 
 
* https://github.com/lukehaas/Scrollify 
 
* 
 
* Copyright 2016, Luke Haas 
 
* Permission is hereby granted, free of charge, to any person obtaining a copy of 
 
* this software and associated documentation files (the "Software"), to deal in 
 
* the Software without restriction, including without limitation the rights to 
 
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 
 
* the Software, and to permit persons to whom the Software is furnished to do so, 
 
* subject to the following conditions: 
 
* 
 
* The above copyright notice and this permission notice shall be included in all 
 
* copies or substantial portions of the Software. 
 
* 
 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
 
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 
 
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
 
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
 
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 
 
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 
 

 

 

 
If section being scrolled to is an interstitialSection and the last section on page 
 

 
then value to scroll to is current position plus height of interstitialSection 
 

 
*/ 
 
    
 

 
(function (global,factory) { 
 
\t "use strict"; 
 
\t if (typeof define === 'function' && define.amd) { 
 
\t \t // AMD. Register as an anonymous module. 
 
\t \t define(['jquery'], function($) { 
 
\t \t \t return factory($, global, global.document); 
 
\t \t }); 
 
\t } else if (typeof module === 'object' && module.exports) { 
 
\t \t // Node/CommonJS 
 
\t \t module.exports = function(root, jQuery) { 
 
\t \t \t if (jQuery === undefined) { 
 
\t \t \t \t // require('jQuery') returns a factory that requires window to 
 
\t \t \t \t // build a jQuery instance, we normalize how we use modules 
 
\t \t \t \t // that require this pattern but the window provided is a noop 
 
\t \t \t \t // if it's defined (how jquery works) 
 
\t \t \t \t if (typeof window !== 'undefined') { 
 
\t \t \t \t \t jQuery = require('jquery'); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t jQuery = require('jquery')(root); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t factory(jQuery, global, global.document); 
 
\t \t \t return jQuery; 
 
\t \t }; 
 
\t } else { 
 
\t \t // Browser globals 
 
\t \t factory(jQuery, global, global.document); 
 
\t } 
 
}(typeof window !== 'undefined' ? window : this, function ($, window, document, undefined) { 
 
\t "use strict"; 
 
\t var heights = [], 
 
\t \t names = [], 
 
\t \t elements = [], 
 
\t \t overflow = [], 
 
\t \t index = 0, 
 
\t \t currentIndex = 0, 
 
\t \t interstitialIndex = 1, 
 
\t \t hasLocation = false, 
 
\t \t timeoutId, 
 
\t \t timeoutId2, 
 
\t \t $window = $(window), 
 
\t \t top = $window.scrollTop(), 
 
\t \t scrollable = false, 
 
\t \t locked = false, 
 
\t \t scrolled = false, 
 
\t \t manualScroll, 
 
\t \t swipeScroll, 
 
\t \t util, 
 
\t \t disabled = false, 
 
\t \t scrollSamples = [], 
 
\t \t scrollTime = new Date().getTime(), 
 
\t \t firstLoad = true, 
 
\t \t initialised = false, 
 
\t \t wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll', 
 
\t \t settings = { 
 
\t \t \t //section should be an identifier that is the same for each section 
 
\t \t \t section: ".section", 
 
\t \t \t //sectionName: "section-name", 
 
\t \t \t interstitialSection: "", 
 
\t \t \t easing: "easeOutExpo", 
 
\t \t \t scrollSpeed: 500, 
 
\t \t \t offset : 0, 
 
\t \t \t scrollbars: true, 
 
\t \t \t target:"html,body", 
 
\t \t \t standardScrollElements: false, 
 
\t \t \t setHeights: true, 
 
\t \t \t overflowScroll:true, 
 
\t \t \t before:function() {}, 
 
\t \t \t after:function() {}, 
 
\t \t \t afterResize:function() {}, 
 
\t \t \t afterRender:function() {} 
 
\t \t }; 
 
\t function animateScroll(index,instant,callbacks) { 
 
\t \t if(currentIndex===index) { 
 
\t \t \t callbacks = false; 
 
\t \t } 
 
\t \t if(disabled===true) { 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t if(names[index]) { 
 
\t \t \t scrollable = false; 
 
\t \t \t if(callbacks) { 
 
\t \t \t \t settings.before(index,elements); 
 
\t \t \t } 
 
\t \t \t interstitialIndex = 1; 
 
\t \t \t if(settings.sectionName && !(firstLoad===true && index===0)) { 
 
\t \t \t \t if(history.pushState) { 
 
\t \t \t \t  try { 
 
\t \t \t \t \t \t \t history.replaceState(null, null, names[index]); 
 
\t \t \t \t  } catch (e) { 
 
\t \t \t \t  \t if(window.console) { 
 
\t \t \t \t  \t \t console.warn("Scrollify warning: This needs to be hosted on a server to manipulate the hash value."); 
 
\t \t \t \t  \t } 
 
\t \t \t \t  } 
 

 
\t \t \t \t } else { 
 
\t \t \t \t \t window.location.hash = names[index]; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t if(instant) { 
 
\t \t \t \t $(settings.target).stop().scrollTop(heights[index]); 
 
\t \t \t \t if(callbacks) { 
 
\t \t \t \t \t settings.after(index,elements); 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t locked = true; 
 
\t \t \t \t if($().velocity) { 
 
\t \t \t \t \t $(settings.target).stop().velocity('scroll', { 
 
\t \t \t \t \t duration: settings.scrollSpeed, 
 
\t \t \t \t \t easing: settings.easing, 
 
\t \t \t \t \t offset: heights[index], 
 
\t \t \t \t \t mobileHA: false 
 
\t \t \t \t }); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $(settings.target).stop().animate({ 
 
\t \t \t \t \t \t scrollTop: heights[index] 
 
\t \t \t \t \t }, settings.scrollSpeed,settings.easing); 
 
\t \t \t \t } 
 

 
\t \t \t \t if(window.location.hash.length && settings.sectionName && window.console) { 
 
\t \t \t \t \t try { 
 
\t \t \t \t \t \t if($(window.location.hash).length) { 
 
\t \t \t \t \t \t \t console.warn("Scrollify warning: There are IDs on the page that match the hash value - this will cause the page to anchor."); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } catch (e) { 
 
\t \t \t \t \t \t console.warn("Scrollify warning:", window.location.hash, "is not a valid jQuery expression."); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t $(settings.target).promise().done(function(){ 
 
\t \t \t \t \t currentIndex = index; 
 
\t \t \t \t \t locked = false; 
 
\t \t \t \t \t firstLoad = false; 
 
\t \t \t \t \t if(callbacks) { 
 
\t \t \t \t \t \t settings.after(index,elements); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t } 
 

 
\t \t } 
 
\t } 
 

 
\t function isAccelerating(samples) { 
 
\t \t \t \t function average(num) { 
 
\t \t \t \t \t var sum = 0; 
 

 
\t \t \t \t \t var lastElements = samples.slice(Math.max(samples.length - num, 1)); 
 

 
      for(var i = 0; i < lastElements.length; i++){ 
 
       sum += lastElements[i]; 
 
      } 
 

 
      return Math.ceil(sum/num); 
 
\t \t \t \t } 
 

 
\t \t \t \t var avEnd = average(10); 
 
     var avMiddle = average(70); 
 

 
     if(avEnd >= avMiddle) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t } 
 
\t $.scrollify = function(options) { 
 
\t \t initialised = true; 
 

 
\t \t $.easing['easeOutExpo'] = function(x, t, b, c, d) { 
 
\t \t \t return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
 
\t \t }; 
 

 
\t \t manualScroll = { 
 
\t \t \t /*handleMousedown:function() { 
 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 
\t \t \t \t scrollable = false; 
 
\t \t \t \t scrolled = false; 
 
\t \t \t },*/ 
 
\t \t \t handleMouseup:function() { 
 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 
\t \t \t \t scrollable = true; 
 
\t \t \t \t if(scrolled) { 
 
\t \t \t \t \t //instant,callbacks 
 
\t \t \t \t \t manualScroll.calculateNearest(false,true); 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t handleScroll:function() { 
 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 
\t \t \t \t if(timeoutId){ 
 
\t \t \t \t \t clearTimeout(timeoutId); 
 
\t \t \t \t } 
 

 
\t \t \t \t timeoutId = setTimeout(function(){ 
 
\t \t \t \t \t scrolled = f; 
 
\t \t \t \t \t if(scrollable===false) { 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t scrollable = false; 
 

 
\t \t \t \t \t //instant,callbacks 
 
\t \t \t \t \t manualScroll.calculateNearest(false,false); 
 
\t \t \t \t }, 200); 
 
\t \t \t }, 
 
\t \t \t calculateNearest:function(instant,callbacks) { 
 
\t \t \t \t top = $window.scrollTop(); 
 
\t \t \t \t var i =1, 
 
\t \t \t \t \t max = heights.length, 
 
\t \t \t \t \t closest = 0, 
 
\t \t \t \t \t prev = Math.abs(heights[0] - top), 
 
\t \t \t \t \t diff; 
 
\t \t \t \t for(;i<max;i++) { 
 
\t \t \t \t \t diff = Math.abs(heights[i] - top); 
 

 
\t \t \t \t \t if(diff < prev) { 
 
\t \t \t \t \t \t prev = diff; 
 
\t \t \t \t \t \t closest = i; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t if(atBottom() || atTop()) { 
 
\t \t \t \t \t index = closest; 
 
\t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t animateScroll(closest,instant,callbacks); 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t /*wheel scroll*/ 
 
\t \t \t wheelHandler:function(e) { 
 

 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else if(settings.standardScrollElements) { 
 
\t \t \t \t \t if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { 
 
\t \t \t \t \t \t return true; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t if(!overflow[index]) { 
 
\t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t } 
 
\t \t \t \t var currentScrollTime = new Date().getTime(); 
 

 

 

 
\t \t \t \t e = e || window.event; 
 
\t \t \t \t var value = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail; 
 
\t \t \t \t var delta = Math.max(-1, Math.min(1, value)); 
 

 

 

 
\t \t \t \t //delta = delta || -e.originalEvent.detail/3 || e.originalEvent.wheelDelta/120; 
 

 

 
\t \t \t \t if(scrollSamples.length > 149){ 
 
\t \t \t \t \t scrollSamples.shift(); 
 
\t \t \t \t } 
 
\t \t \t \t //scrollSamples.push(Math.abs(delta*10)); 
 
\t \t \t \t scrollSamples.push(Math.abs(value)); 
 

 
\t \t \t \t if((currentScrollTime-scrollTime) > 200){ 
 
\t \t \t \t \t scrollSamples = []; 
 
\t \t \t \t } 
 
\t \t \t \t scrollTime = currentScrollTime; 
 

 

 
\t \t \t \t if(locked) { 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 

 
\t \t \t \t if(delta<0) { 
 
\t \t \t \t \t if(index<heights.length-1) { 
 
\t \t \t \t \t \t if(atBottom()) { 
 
\t \t \t \t \t \t \t if(isAccelerating(scrollSamples)) { 
 
\t \t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t \t index++; 
 
\t \t \t \t \t \t \t \t locked = true; 
 
\t \t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t return false; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } else if(delta>0) { 
 
\t \t \t \t \t if(index>0) { 
 
\t \t \t \t \t \t if(atTop()) { 
 
\t \t \t \t \t \t \t if(isAccelerating(scrollSamples)) { 
 
\t \t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t \t index--; 
 
\t \t \t \t \t \t \t \t locked = true; 
 
\t \t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t return false 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t }, 
 
\t \t \t /*end of wheel*/ 
 
\t \t \t keyHandler:function(e) { 
 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 
\t \t \t \t if(locked===true) { 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t if(e.keyCode==33) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t if(index>0) { 
 
\t \t \t \t \t \t if(atTop()) { 
 
\t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t index--; 
 
\t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } else if(e.keyCode==34) { 
 
\t \t \t \t \t if(index<heights.length-1) { 
 
\t \t \t \t \t \t if(atBottom()) { 
 
\t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t index++; 
 
\t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t if(e.keyCode==38) { 
 
\t \t \t \t \t if(index>0) { 
 
\t \t \t \t \t \t if(atTop()) { 
 
\t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t index--; 
 
\t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t \t console.log('up arrow'); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } else if(e.keyCode==40) { 
 
\t \t \t \t \t if(index<heights.length-1) { 
 
\t \t \t \t \t \t if(atBottom()) { 
 
\t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t index++; 
 
\t \t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t \t \t console.log('down arrow'); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t /*home, end button testing*/ 
 
\t \t \t \t if(e.keyCode==35) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t for(index=6;index<1;index--) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t console.log("worked on end button"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t \t else if(e.keyCode==36) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t for(index=0;intex<1;index++) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t console.log("worked on home button"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t \t /*home,end button end*/ 
 
\t \t \t }, 
 
\t \t \t init:function() { 
 
\t \t \t \t if(settings.scrollbars) { 
 
\t \t \t \t \t $window.on('mousedown', manualScroll.handleMousedown); 
 
\t \t \t \t \t $window.on('mouseup', manualScroll.handleMouseup); 
 
\t \t \t \t \t $window.on('scroll', manualScroll.handleScroll); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $("body").css({"overflow":"hidden"}); 
 
\t \t \t \t } 
 
\t \t \t \t $window.on(wheelEvent,manualScroll.wheelHandler); 
 
\t \t \t \t $(document).bind(wheelEvent,manualScroll.wheelHandler); 
 
\t \t \t \t $window.on('keydown', manualScroll.keyHandler); 
 
\t \t \t } 
 
\t \t }; 
 

 
\t \t swipeScroll = { 
 
\t \t \t touches : { 
 
\t \t \t \t "touchstart": {"y":-1,"x":-1}, 
 
\t \t \t \t "touchmove" : {"y":-1,"x":-1}, 
 
\t \t \t \t "touchend" : false, 
 
\t \t \t \t "direction" : "undetermined" 
 
\t \t \t }, 
 
\t \t \t options:{ 
 
\t \t \t \t "distance" : 30, 
 
\t \t \t \t "timeGap" : 800, 
 
\t \t \t \t "timeStamp" : new Date().getTime() 
 
\t \t \t }, 
 
\t \t \t touchHandler: function(event) { 
 
\t \t \t \t if(disabled===true) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else if(settings.standardScrollElements) { 
 
\t \t \t \t \t if($(event.target).is(settings.standardScrollElements) || $(event.target).closest(settings.standardScrollElements).length) { 
 
\t \t \t \t \t \t return true; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t var touch; 
 
\t \t \t \t if (typeof event !== 'undefined'){ 
 
\t \t \t \t \t if (typeof event.touches !== 'undefined') { 
 
\t \t \t \t \t \t touch = event.touches[0]; 
 
\t \t \t \t \t \t switch (event.type) { 
 
\t \t \t \t \t \t \t case 'touchstart': 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchstart.y = touch.pageY; 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchmove.y = -1; 
 

 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchstart.x = touch.pageX; 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchmove.x = -1; 
 

 
\t \t \t \t \t \t \t \t swipeScroll.options.timeStamp = new Date().getTime(); 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchend = false; 
 
\t \t \t \t \t \t \t case 'touchmove': 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchmove.y = touch.pageY; 
 
\t \t \t \t \t \t \t \t swipeScroll.touches.touchmove.x = touch.pageX; 
 
\t \t \t \t \t \t \t \t if(swipeScroll.touches.touchstart.y!==swipeScroll.touches.touchmove.y && (Math.abs(swipeScroll.touches.touchstart.y-swipeScroll.touches.touchmove.y)>Math.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { 
 
\t \t \t \t \t \t \t \t \t //if(!overflow[index]) { 
 
\t \t \t \t \t \t \t \t \t \t event.preventDefault(); 
 
\t \t \t \t \t \t \t \t \t //} 
 
\t \t \t \t \t \t \t \t \t swipeScroll.touches.direction = "y"; 
 
\t \t \t \t \t \t \t \t \t if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { 
 

 
\t \t \t \t \t \t \t \t \t \t swipeScroll.touches.touchend = true; 
 
\t \t \t \t \t \t \t \t \t \t if (swipeScroll.touches.touchstart.y > -1) { 
 

 
\t \t \t \t \t \t \t \t \t \t \t if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t swipeScroll.up(); 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t swipeScroll.down(); 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t case 'touchend': 
 
\t \t \t \t \t \t \t \t if(swipeScroll.touches[event.type]===false) { 
 
\t \t \t \t \t \t \t \t \t swipeScroll.touches[event.type] = true; 
 
\t \t \t \t \t \t \t \t \t if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { 
 

 
\t \t \t \t \t \t \t \t \t \t if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { 
 
\t \t \t \t \t \t \t \t \t \t \t if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t swipeScroll.up(); 
 

 
\t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t swipeScroll.down(); 
 

 
\t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t swipeScroll.touches.touchstart.y = -1; 
 
\t \t \t \t \t \t \t \t \t \t swipeScroll.touches.touchstart.x = -1; 
 
\t \t \t \t \t \t \t \t \t \t swipeScroll.touches.direction = "undetermined"; 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t default: 
 
\t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t down: function() { 
 
\t \t \t \t if(index<=heights.length-1) { 
 

 
\t \t \t \t \t if(atBottom() && index<heights.length-1) { 
 

 
\t \t \t \t \t \t index++; 
 
\t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t if(Math.floor(elements[index].height()/$window.height())>interstitialIndex) { 
 

 
\t \t \t \t \t \t \t interstitialScroll(parseInt(heights[index])+($window.height()*interstitialIndex)); 
 
\t \t \t \t \t \t \t interstitialIndex += 1; 
 

 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t interstitialScroll(parseInt(heights[index])+(elements[index].height()-$window.height())); 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t up: function() { 
 
\t \t \t \t if(index>=0) { 
 
\t \t \t \t \t if(atTop() && index>0) { 
 

 
\t \t \t \t \t \t index--; 
 
\t \t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t \t animateScroll(index,false,true); 
 
\t \t \t \t \t } else { 
 

 
\t \t \t \t \t \t if(interstitialIndex>2) { 
 

 
\t \t \t \t \t \t \t interstitialIndex -= 1; 
 
\t \t \t \t \t \t \t interstitialScroll(parseInt(heights[index])+($window.height()*interstitialIndex)); 
 

 
\t \t \t \t \t \t } else { 
 

 
\t \t \t \t \t \t \t interstitialIndex = 1; 
 
\t \t \t \t \t \t \t interstitialScroll(parseInt(heights[index])); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 

 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t init: function() { 
 
\t \t \t \t if (document.addEventListener) { 
 
\t \t \t \t \t document.addEventListener('touchstart', swipeScroll.touchHandler, false); 
 
\t \t \t \t \t document.addEventListener('touchmove', swipeScroll.touchHandler, false); 
 
\t \t \t \t \t document.addEventListener('touchend', swipeScroll.touchHandler, false); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }; 
 

 

 
\t \t util = { 
 
\t \t \t refresh:function(withCallback) { 
 
\t \t \t \t clearTimeout(timeoutId2); 
 
\t \t \t \t timeoutId2 = setTimeout(function() { 
 
\t \t \t \t \t sizePanels(); 
 
\t \t \t \t \t calculatePositions(true); 
 
\t \t \t \t \t if(withCallback) { 
 
\t \t \t \t \t \t \t settings.afterResize(); 
 
\t \t \t \t \t } 
 
\t \t \t \t },400); 
 
\t \t \t }, 
 
\t \t \t handleUpdate:function() { 
 
\t \t \t \t util.refresh(false); 
 
\t \t \t }, 
 
\t \t \t handleResize:function() { 
 
\t \t \t \t util.refresh(true); 
 
\t \t \t } 
 
\t \t }; 
 
\t \t settings = $.extend(settings, options); 
 

 
\t \t sizePanels(); 
 

 
\t \t calculatePositions(false); 
 

 
\t \t if(true===hasLocation) { 
 
\t \t \t //index, instant, callbacks 
 
\t \t \t animateScroll(index,false,true); 
 
\t \t } else { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t //instant,callbacks 
 
\t \t \t \t manualScroll.calculateNearest(true,false); 
 
\t \t \t },200); 
 
\t \t } 
 
\t \t if(heights.length) { 
 
\t \t \t manualScroll.init(); 
 
\t \t \t swipeScroll.init(); 
 

 
\t \t \t $window.on("resize",util.handleResize); 
 
\t \t \t if (document.addEventListener) { 
 
\t \t \t \t window.addEventListener("orientationchange", util.handleResize, false); 
 
\t \t \t } 
 
\t \t } 
 
\t \t function interstitialScroll(pos) { 
 
\t \t \t if($().velocity) { 
 
\t \t \t \t $(settings.target).stop().velocity('scroll', { 
 
\t \t \t \t \t duration: settings.scrollSpeed, 
 
\t \t \t \t \t easing: settings.easing, 
 
\t \t \t \t \t offset: pos, 
 
\t \t \t \t \t mobileHA: false 
 
\t \t \t \t }); 
 
\t \t \t } else { 
 
\t \t \t \t $(settings.target).stop().animate({ 
 
\t \t \t \t \t scrollTop: pos 
 
\t \t \t \t }, settings.scrollSpeed,settings.easing); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t function sizePanels() { 
 
\t \t \t var selector = settings.section; 
 
\t \t \t overflow = []; 
 
\t \t \t if(settings.interstitialSection.length) { 
 
\t \t \t \t selector += "," + settings.interstitialSection; 
 
\t \t \t } 
 
\t \t \t $(selector).each(function(i) { 
 
\t \t \t \t var $this = $(this); 
 

 
\t \t \t \t if(settings.setHeights) { 
 
\t \t \t \t \t if($this.is(settings.interstitialSection)) { 
 
\t \t \t \t \t \t overflow[i] = false; 
 
\t \t \t \t \t } else { 
 

 
\t \t \t \t \t \t if(($this.css("height","auto").outerHeight()<$window.height()) || $this.css("overflow")==="hidden") { 
 
\t \t \t \t \t \t \t $this.css({"height":$window.height()}); 
 

 
\t \t \t \t \t \t \t overflow[i] = false; 
 
\t \t \t \t \t \t } else { 
 

 
\t \t \t \t \t \t \t $this.css({"height":$this.height()}); 
 

 
\t \t \t \t \t \t \t if(settings.overflowScroll) { 
 
\t \t \t \t \t \t \t \t \t overflow[i] = true; 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t overflow[i] = false; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 
\t \t \t \t } else { 
 

 
\t \t \t \t \t if(($this.outerHeight()<$window.height()) || (settings.overflowScroll===false)) { 
 
\t \t \t \t \t \t overflow[i] = false; 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t overflow[i] = true; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t \t function calculatePositions(resize) { 
 
\t \t \t var selector = settings.section; 
 
\t \t \t if(settings.interstitialSection.length) { 
 
\t \t \t \t selector += "," + settings.interstitialSection; 
 
\t \t \t } 
 
\t \t \t heights = []; 
 
\t \t \t names = []; 
 
\t \t \t elements = []; 
 
\t \t \t $(selector).each(function(i){ 
 
\t \t \t \t \t var $this = $(this); 
 
\t \t \t \t \t if(i>0) { 
 
\t \t \t \t \t \t heights[i] = parseInt($this.offset().top) + settings.offset; 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t heights[i] = parseInt($this.offset().top); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(settings.sectionName && $this.data(settings.sectionName)) { 
 
\t \t \t \t \t \t names[i] = "#" + $this.data(settings.sectionName).replace(/ /g,"-"); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t if($this.is(settings.interstitialSection)===false) { 
 
\t \t \t \t \t \t \t names[i] = "#" + (i + 1); 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t names[i] = "#"; 
 
\t \t \t \t \t \t \t if(i===$(selector).length-1 && i>1) { 
 
\t \t \t \t \t \t \t \t heights[i] = heights[i-1]+parseInt($this.height()); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t \t elements[i] = $this; 
 
\t \t \t \t \t try { 
 
\t \t \t \t \t \t if($(names[i]).length && window.console) { 
 
\t \t \t \t \t \t \t console.warn("Scrollify warning: Section names can't match IDs on the page - this will cause the browser to anchor."); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } catch (e) {} 
 

 
\t \t \t \t \t if(window.location.hash===names[i]) { 
 
\t \t \t \t \t \t index = i; 
 
\t \t \t \t \t \t hasLocation = true; 
 
         \t \t \t \t \t 
 
\t \t \t \t \t } 
 

 
\t \t \t }); 
 

 
\t \t \t if(true===resize) { 
 
\t \t \t \t //index, instant, callbacks 
 
\t \t \t \t animateScroll(index,false,false); 
 
\t \t \t } else { 
 
\t \t \t \t settings.afterRender(); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t function atTop() { 
 
\t \t \t if(!overflow[index]) { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t \t top = $window.scrollTop(); 
 
\t \t \t if(top>parseInt(heights[index])) { 
 
\t \t \t \t return false; 
 
\t \t \t } else { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t } 
 
\t \t function atBottom() { 
 
\t \t \t if(!overflow[index]) { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t \t top = $window.scrollTop(); 
 

 
\t \t \t if(top<parseInt(heights[index])+(elements[index].outerHeight()-$window.height())-28) { 
 

 
\t \t \t \t return false; 
 

 
\t \t \t } else { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
\t function move(panel,instant) { 
 
\t \t var z = names.length; 
 
\t \t for(;z>=0;z--) { 
 
\t \t \t if(typeof panel === 'string') { 
 
\t \t \t \t if (names[z]===panel) { 
 
\t \t \t \t \t index = z; 
 
\t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t animateScroll(z,instant,true); 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t if(z===panel) { 
 
\t \t \t \t \t index = z; 
 
\t \t \t \t \t //index, instant, callbacks 
 
\t \t \t \t \t animateScroll(z,instant,true); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t $.scrollify.move = function(panel) { 
 
\t \t if(panel===undefined) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t if(panel.originalEvent) { 
 
\t \t \t panel = $(this).attr("href"); 
 
\t \t } 
 
\t \t move(panel,false); 
 
\t }; 
 
\t $.scrollify.instantMove = function(panel) { 
 
\t \t if(panel===undefined) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t move(panel,true); 
 
\t }; 
 
\t $.scrollify.next = function() { 
 
\t \t if(index<names.length) { 
 
\t \t \t index += 1; 
 
\t \t \t animateScroll(index,false,true); 
 
\t \t } 
 
\t }; 
 
\t $.scrollify.previous = function() { 
 
\t \t if(index>0) { 
 
\t \t \t index -= 1; 
 
\t \t \t //index, instant, callbacks 
 
\t \t \t animateScroll(index,false,true); 
 
\t \t } 
 
\t }; 
 
\t $.scrollify.instantNext = function() { 
 
\t \t if(index<names.length) { 
 
\t \t \t index += 1; 
 
\t \t \t //index, instant, callbacks 
 
\t \t \t animateScroll(index,true,true); 
 
\t \t } 
 
\t }; 
 
\t $.scrollify.instantPrevious = function() { 
 
\t \t if(index>0) { 
 
\t \t \t index -= 1; 
 
\t \t \t //index, instant, callbacks 
 
\t \t \t animateScroll(index,true,true); 
 
\t \t } 
 
\t }; 
 
\t $.scrollify.destroy = function() { 
 
\t \t if(!initialised) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t if(settings.setHeights) { 
 
\t \t \t $(settings.section).each(function() { 
 
\t \t \t \t $(this).css("height","auto"); 
 
\t \t \t }); 
 
\t \t } 
 
\t \t $window.off("resize",util.handleResize); 
 
\t \t if(settings.scrollbars) { 
 
\t \t \t $window.off('mousedown', manualScroll.handleMousedown); 
 
\t \t \t $window.off('mouseup', manualScroll.handleMouseup); 
 
\t \t \t $window.off('scroll', manualScroll.handleScroll); 
 
\t \t } 
 
\t \t $window.off(wheelEvent,manualScroll.wheelHandler); 
 
\t \t $window.off('keydown', manualScroll.keyHandler); 
 

 
\t \t if (document.addEventListener) { 
 
\t \t \t document.removeEventListener('touchstart', swipeScroll.touchHandler, false); 
 
\t \t \t document.removeEventListener('touchmove', swipeScroll.touchHandler, false); 
 
\t \t \t document.removeEventListener('touchend', swipeScroll.touchHandler, false); 
 
\t \t } 
 
\t \t heights = []; 
 
\t \t names = []; 
 
\t \t elements = []; 
 
\t \t overflow = []; 
 
\t }; 
 
\t $.scrollify.update = function() { 
 
\t \t if(!initialised) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t util.handleUpdate(); 
 
\t }; 
 
\t $.scrollify.current = function() { 
 
\t \t return elements[index]; 
 
\t }; 
 
\t $.scrollify.disable = function() { 
 
\t \t disabled = true; 
 
\t }; 
 
\t $.scrollify.enable = function() { 
 
\t \t disabled = false; 
 
\t \t if (initialised) { 
 
\t \t \t //instant,callbacks 
 
\t \t \t manualScroll.calculateNearest(false,false); 
 
\t \t } 
 
\t }; 
 
\t $.scrollify.isDisabled = function() { 
 
\t \t return disabled; 
 
\t }; 
 
\t $.scrollify.setOptions = function(updatedOptions) { 
 
\t \t if(!initialised) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t if(typeof updatedOptions === "object") { 
 
\t \t \t settings = $.extend(settings, updatedOptions); 
 
\t \t \t util.handleUpdate(); 
 
\t \t } else if(window.console) { 
 
\t \t \t console.warn("Scrollify warning: Options need to be in an object."); 
 
\t \t } 
 
\t \t 
 
\t }; 
 
\t 
 
}));

Antwort

0

Ich glaube, Sie falsch Ereignis hören. Verwenden Sie keydown event das wird funktionieren.

working fiddle

+0

/ich habe es in Kopfteil hinzugefügt habe ich Stück hier Code – user3386779

Verwandte Themen