Question

今天我正在尝试制作基于http://codepen.io/anon/pen/mJwbK的视频滚动控制网站，但我不知道如何限制滚动速度，我的意思是，如果我快速滚动视频播放速度非常快，那么我想限制速度，这是我的代码：

// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height()-20;


var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;


// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid.pause();
 
window.onscroll = function(){
    //Set the video position that we want to end up at:
    targetscrollpos = window.pageYOffset/400;
  
    //move the red dot to a position across the side of the screen
    //that indicates how far we've scrolled.
    scroll.css('top', 10+(window.pageYOffset/13500*windowheight));
};


setInterval(function(){  
        
      //Accelerate towards the target:
      scrollpos += (targetscrollpos - scrollpos)*accelamount;
  
      //move the blue dot to a position across the side of the screen
      //that indicates where the current video scroll pos is.  
      time.css('top', 10+(scrollpos/13500*400*windowheight));
  
      //update video playback
      vid.currentTime = scrollpos;
      vid.pause();
    
}, 40);

#set-height {
  display: block;
  height: 13500px;
}
#v0 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}
p font-family helvetica {
  font-size: 24px;
}
#time {
  position: fixed;
  display: block;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: rgba(0,0,255,0.5);
}
#scroll {
  position: fixed;
  display: block;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: rgba(255,0,0,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
  <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
  <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
  <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

Answer 1

您可以尝试此示例并为您的网站进行编辑。 “你到那里的网站不错，我喜欢这个主意”

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta) {
    var time = 1000;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

<div id="myDiv">
    Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span>
</div>

以下是JSFiddle的实例 - http://jsfiddle.net/36dp03ur/

希望这有帮助。

视频滚动控制极限速度

1 个答案: