Integration Virtualscroll.js

因此，假设我已经准确地了解了您想要做什么，那么我就在这里为您提供了一个有效的解决方案：

http://jsfiddle.net/L7ze91vd/3/

这个插件似乎不适用于jsfiddle。。。但是div的滚动应该保持不变。

解决方案是将主div设置为一个固定的div，这样它在滚动时就不会移动，然后只需使用填充div滚动"顶部"的其他div，以填补主div不再是滚动区域一部分的空白。

我修改了html部分，使其看起来像这样：

<div class="section" id="home">
    <div class="page">
        WELCOME
    </div>
</div>
<div id="wrapper">
  <div class="section"  id="padding">
      <div class="page">
      </div>
  </div>
  <div class="section"  id="work">
      <div class="page">
          WORK
      </div>
  </div>
  <div class="section" id="about">
      <div class="page">
          ABOUT ME
      </div>
  </div>
  <div class="section" id="contact">
      <div class="page">
          CONTACT
      </div>
  </div>
</div>

还必须修改主div的菜单按钮：

<li class="one"><a href="#home">home</a></li>

至：

<li class="one"><a href="#padding">home</a></li>

我通过添加以下块修改了css：

#wrapper {
    height:100%;
    width:100%;
    position:absolute;
}
#home {
     position:fixed;
}
ul.menu {
    z-index:1;
}

有一个虚拟滚动js

var VirtualScroll = (function(document) {
	var vs = {};
	var numListeners, listeners = [], initialized = false;
	var touchStartX, touchStartY;
	// [ These settings can be customized with the options() function below ]
	// Mutiply the touch action by two making the scroll a bit faster than finger movement
	var touchMult = 2;
	// Firefox on Windows needs a boost, since scrolling is very slow
	var firefoxMult = 15;
	// How many pixels to move with each key press
	var keyStep = 120;
	// General multiplier for all mousehweel including FF
	var mouseMult = 1;
	var bodyTouchAction;
	var hasWheelEvent = 'onwheel' in document;
	var hasMouseWheelEvent = 'onmousewheel' in document;
	var hasTouch = 'ontouchstart' in document;
	var hasTouchWin = navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1;
	var hasPointer = !!window.navigator.msPointerEnabled;
	var hasKeyDown = 'onkeydown' in document;
	var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
	var event = {
		y: 0,
		x: 0,
		deltaX: 0,
		deltaY: 0,
		originalEvent: null
	};
	vs.on = function(f) {
		if(!initialized) initListeners(); 
		listeners.push(f);
		numListeners = listeners.length;
	}
	vs.options = function(opt) {
		keyStep = opt.keyStep || 120;
		firefoxMult = opt.firefoxMult || 15;
		touchMult = opt.touchMult || 2;
		mouseMult = opt.mouseMult || 1;
	}
	vs.off = function(f) {
		listeners.splice(f, 1);
		numListeners = listeners.length;
		if(numListeners <= 0) destroyListeners();
	}
	var notify = function(e) {
		event.x += event.deltaX;
		event.y += event.deltaY;
		event.originalEvent = e;
		for(var i = 0; i < numListeners; i++) {
			listeners[i](event);
		}
	}
	var onWheel = function(e) {
		// In Chrome and in Firefox (at least the new one)
		event.deltaX = e.wheelDeltaX || e.deltaX * -1;
		event.deltaY = e.wheelDeltaY || e.deltaY * -1;
		// for our purpose deltamode = 1 means user is on a wheel mouse, not touch pad 
		// real meaning: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent#Delta_modes
		if(isFirefox && e.deltaMode == 1) {
			event.deltaX *= firefoxMult;
			event.deltaY *= firefoxMult;
		} 
		event.deltaX *= mouseMult;
		event.deltaY *= mouseMult;
		notify(e);
	}
	var onMouseWheel = function(e) {
		// In Safari, IE and in Chrome if 'wheel' isn't defined
		event.deltaX = (e.wheelDeltaX) ? e.wheelDeltaX : 0;
		event.deltaY = (e.wheelDeltaY) ? e.wheelDeltaY : e.wheelDelta;
		notify(e);	
	}
	var onTouchStart = function(e) {
		var t = (e.targetTouches) ? e.targetTouches[0] : e;
		touchStartX = t.pageX;	
		touchStartY = t.pageY;
	}
	var onTouchMove = function(e) {
		// e.preventDefault(); // < This needs to be managed externally
		var t = (e.targetTouches) ? e.targetTouches[0] : e;
		event.deltaX = (t.pageX - touchStartX) * touchMult;
		event.deltaY = (t.pageY - touchStartY) * touchMult;
		
		touchStartX = t.pageX;
		touchStartY = t.pageY;
		notify(e);
	}
	var onKeyDown = function(e) {
		// 37 left arrow, 38 up arrow, 39 right arrow, 40 down arrow
		event.deltaX = event.deltaY = 0;
		switch(e.keyCode) {
			case 37:
				event.deltaX = -keyStep;
				break;
			case 39:
				event.deltaX = keyStep;
				break;
			case 38:
				event.deltaY = keyStep;
				break;
			case 40:
				event.deltaY = -keyStep;
				break;
		}
		notify(e);
	}
	var initListeners = function() {
		if(hasWheelEvent) document.addEventListener("wheel", onWheel);
		if(hasMouseWheelEvent) document.addEventListener("mousewheel", onMouseWheel);
		if(hasTouch) {
			document.addEventListener("touchstart", onTouchStart);
			document.addEventListener("touchmove", onTouchMove);
		}
		
		if(hasPointer && hasTouchWin) {
			bodyTouchAction = document.body.style.msTouchAction;
			document.body.style.msTouchAction = "none";
			document.addEventListener("MSPointerDown", onTouchStart, true);
			document.addEventListener("MSPointerMove", onTouchMove, true);
		}
		if(hasKeyDown) document.addEventListener("keydown", onKeyDown);
		initialized = true;
	}
	var destroyListeners = function() {
		if(hasWheelEvent) document.removeEventListener("wheel", onWheel);
		if(hasMouseWheelEvent) document.removeEventListener("mousewheel", onMouseWheel);
		if(hasTouch) {
			document.removeEventListener("touchstart", onTouchStart);
			document.removeEventListener("touchmove", onTouchMove);
		}
		
		if(hasPointer && hasTouchWin) {
			document.body.style.msTouchAction = bodyTouchAction;
			document.removeEventListener("MSPointerDown", onTouchStart, true);
			document.removeEventListener("MSPointerMove", onTouchMove, true);
		}
		if(hasKeyDown) document.removeEventListener("keydown", onKeyDown);
		initialized = false;
	}
	return vs;
})(document);

        body {
            margin: 0;
            padding: 0;
            font-family: "Univers LT 45 Light";
            /* use this to avoid elastic overscroll on desktop (see below for mobile */
            overflow: hidden;
        }
        section {
            /* the scrollable section needs to be positioned absolute, 
               otherwise the margins are not taken into account when measuing height (CSS...) */
            position: absolute;
            width: 100%;
	
        }
        section div {
            width: 100%;
            height: 1000px;
            position: relative;
        }
        #box1 {
			background: rgba(0,153,204,1);
           
       
         
        }
        #box2 {
           
        }
        #box3 {
          
        }
        #box4 {
           
        }
        #box5 {
            z-index: 10;
            background-color: rgb(200, 0, 200);
			bottom: 0;
       
        }
   

<head>
    <title>Virtual scroll demo - simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../src/framework/VirtualScroll.js"></script>
</head>
<body>
 
    <section>
        <div id="box1" class="point">
        salut a toutes et à tous
        
        </div>
        <div id="box2" class="point">
        
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
        
        </div>
        <div id="box3" class="point">
       
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
        
        </div>
        <div id="box4" class="point">
       
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.</div>
        <div id="box5">
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.</div>
    </section>
  
    <script type="text/javascript">
        // Grab both red boxes
        var section = document.querySelector("section");
        // Check how much we can scroll. This value is the 
        // height of the scrollable element minus the height of the widow
        var sectionHeight = section.getBoundingClientRect().height - window.innerHeight;
        // Add easing to the scroll. Play with this value to find a setting that you like.
        var ease = 0.1;
        // Store current scroll position
        var targetX = 0, targetY = 0;
        var currentX = 0, currentY = 0;
        // Use this if you want to lock the elastic overscroll on mobile
        document.addEventListener('touchmove', function(e) { e.preventDefault(); });
        // Add virtual scroll listener
        VirtualScroll.on(function(e) {
            // Accumulate delta value on each scroll event
            targetY += e.deltaY;
            targetX += e.deltaX;
            // Clamp the value so it doesn't go too far up or down
            // The value needs to be between 0 and -sectionHeight
            targetY = Math.max(-sectionHeight, targetY);
            targetY = Math.min(0, targetY);
        });
        var scroll = function() {
            // Make sure this works across different browsers (use the shim or something)
            requestAnimationFrame(scroll);
            // Get closer to the target value at each frame, using ease. 
            // Other easing methods are also ok.
            currentY += (targetY - currentY) * ease;
            // Uncomment this line to scroll horizontally
            // currentX += (targetX - currentX) * ease;
            // Create the CSS transform string
            // (alternativly: use WebKitCSSMatrix, though it doesn't see any faster (http://jsperf.com/webkitcssmatrix-vs-translate3d)
            var v1 = "translateX(" + currentX + "px) translateY(" + currentY + "px)";// translateZ(0)";
            var v2 = "translateX(" + currentX + "px) translateY(" + currentY + "px)";// translateZ(0)";
            // Apply CSS style
            section.style['webkitTransform'] = v1;
            section.style['msTransform'] = v1;
            section.style.transform = v1;
        }
        // Start the rendering loop function
        scroll();
    </script>
</body>

它在编辑中不起作用，但注释中的链接是效果