html – 使用鼠标滚轮滚动到下一个或上一个div_html-js-css

概述我正在尝试在我的网站上获取一个 javascript,所以当一个人在网站上滚动时,它会自动滚动到下一个或前一个具有某个类的Div.我正在使用smoothscroll和scrollto.我还发现了两个我想要组合的代码.但我似乎并不了解整个脚本…… 第一个脚本来自http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery.此脚本可以通我正在尝试在我的网站上获取一个 javascript,所以当一个人在网站上滚动时,它会自动滚动到下一个或前一个具有某个类的div.我正在使用smoothscroll和scrollto.我还发现了两个我想要组合的代码.但我似乎并不了解整个脚本……

第一个脚本来自http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery.此脚本可以通过按next或prevIoUs来在div(具有某个类)之间导航.

第二个脚本是从How to enforce a “smooth scrolling” rule for mousewheel,jQuery?(最后一个帖子)开始,可以在滚动时使网站向下或向上滚动(平滑)一定量的像素.

我想把这两个结合起来但对我来说并不是很直接：/
如果有人能指出我如何做到这一点会很好.谢谢

最好的祝福,

比利海滩

亲爱的拉利比,

感谢您的回答.我尝试了你的代码,但似乎没有让它工作.这是我使用的代码：

<head><script type="text/JavaScript" src="Box/jquery.Js"></script><SCRIPT src="Box/jquery.min.Js"></SCRIPT><SCRIPT src="Box/jquery.scrollTo-1.4.2-min.Js"></SCRIPT><SCRIPT src="Box/jquery.localscroll-1.2.7-min.Js"></SCRIPT><script type="text/JavaScript" src="Box/jquery.mousewheel.min.Js"></script> <style type="text/CSS"><!--div {    border: 1px solID black;    height: 50px;}div.current {    background-color: orange;}--></style><script type="text/JavaScript"> var current $(function() {              $('body').mousewheel(function(event,delta) {        var $current = $('div.current');        console.log(delta);        console.log($current);        if (delta > 0) {            $prev = $current.prev();            if ($prev.length) {                $('body').scrollTo($prev,100);                $current.removeClass('current');                $prev.addClass('current');            }        } else {            $next = $current.next();            if ($next.length) {                $('body').scrollTo($next,100);                $current.removeClass('current');                $next.addClass('current');            }        }        event.preventDefault();    });});</script> </head><body><div  ID="div">1</div><div ID="div">2</div><div ID="div">3</div><div ID="div">4</div><div ID="div">5</div><div ID="div">6</div><div ID="div">7</div><div ID="div">8</div><div ID="div">9</div><div ID="div">10</div><div ID="div">11</div><div ID="div">12</div><div ID="div">13</div><div ID="div">14</div><div ID="div">15</div><div ID="div">16</div><div ID="div">17</div><div ID="div">18</div><div ID="div">19</div><div ID="div">20</div><div ID="div">21</div><div ID="div">22</div><div ID="div">23</div><div ID="div">24</div><div ID="div">25</div><div ID="div">26</div><div  ID="div">27</div><div ID="div">28</div><div ID="div">29</div><div ID="div">30</div><div ID="div">31</div><div ID="div">32</div><div ID="div">33</div><div ID="div">34</div><div ID="div">35</div><div ID="div">36</div><div ID="div">37</div><div ID="div">38</div><div ID="div">39</div><div ID="div">40</div><div ID="div">41</div><div ID="div">42</div><div ID="div">43</div><div ID="div">44</div><div ID="div">45</div><div ID="div">46</div><div ID="div">47</div><div ID="div">48</div><div ID="div">49</div><div ID="div">50</div><div ID="div">51</div><div ID="div">52</div><div ID="div">53</div><div ID="div">54</div><div ID="div">55</div><div ID="div">56</div><div  ID="div">57</div></body></HTML>

解决方法编辑：我稍微调整了小提琴.两个外部脚本中的一个使用http：并且由于链接(编辑之前)使用了https :,Chrome除非您按下小盾牌图标,否则会阻止它.我也更新到最新版本.

这似乎工作正常：http://jsfiddle.net/9Amdx/1707/

var current;$(function() {              $('body').mousewheel(function(event,100);                $current.removeClass('current');                $next.addClass('current');            }        }        event.preventDefault();    });});

总结

以上是内存溢出为你收集整理的html – 使用鼠标滚轮滚动到下一个或上一个div全部内容，希望文章能够帮你解决html – 使用鼠标滚轮滚动到下一个或上一个div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1054055.html