Question

我有一个横向滚动的网站。它适用于Firefox但不适用于Chrome。

知道为什么它不能在Chrome中运行吗？

主JS文件：jquery1.8.2.min.js

横向滚动javascript：

/* jQuery.ScrollTo - Easy element scrolling using jQuery - Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com - Dual licensed under MIT and GPL - Date: 3/9/2009 - @author Ariel Flesler - @version 1.4.1 - http://flesler.blogspot.com/2007/10/jqueryscrollto.html */

;（function（$）{var m = $。scrollTo = function（b，h，f）{$（window）.scrollTo（b，h，f）}; m.defaults = {axis：'xy '，duration：parseFloat（$。fn.jquery）＆gt; = 1.3？0：1}; m.window = function（b）{return $（window）.scrollable（）}; $。fn.scrollable = function（）{return this.map（function（）{var b = this，h =！b.nodeName || $ .inArray（b.nodeName.toLowerCase（），['iframe'，'＃document'，'html'， 'body']）！= - 1; if（！h）返回b; var f =（b.contentWindow || b）.document || b.ownerDocument || b; return $ .browser.safari || f。 compatMode =='BackCompat'？f.body：f.documentElement}）}; $。fn.scrollTo = function（l，j，a）{if（typeof j =='object'）{a = j; j = 0} if（typeof a =='function'）a = {onAfter：a}; if（l =='max'）l = 9e9; a = $ .extend（{}，m.defaults，a）; j = j的|| || a.speed a.duration; a.queue = a.queue＆安培;＆安培; a.axis.length→1;如果（a.queue）焦耳/ = 2; a.offset = N（A。 offset ;; a.over = n（a.over）;返回this.scrollable（）。each（function（）{var k = this，o = $（k），d = l，p，g = {}， q = o.is（'html，body'）; switch（typeof d）{case'number'：case'string'：if（/ ^（[+ - ] =）？\ d +（。\ d +）？（？像素）$ /试验（d））{d = N（d）;破} d = $（d，这一点）; case'object'：如果（d.is || d.style ）p =（d = $（d））。offset（）} $。each（a.axis.split（''），function（b，h）{var f = h =='x'？'Left' ？： '顶部'，I = f.toLowerCase（）中，c = '滚动' + F，R = K [C]，S = H == 'x' 的 '宽度'： '身高';如果（p）{克[C] = p [1] +（q 0：ro.offset（）[I]）;如果（a.margin）{克并[c] - = parseInt函数（d.css（ '余量' + F））|| 0;克并[c] - = parseInt函数（d.css（ '边界' + F + '宽度'））|| 0}克[C] + = a.offset [I] || 0;如果（一个.over [i]）g [c] + = ds.toLowerCase（）* a.over [i]} else g [c] = d [i]; if（/ ^ \ d + $ / .test（g [c ]））G [C] = G [C]＆LT; = 0 0：Math.min（克并[c]中，u（S））;如果（b＆安培;＆安培; a.queue）{如果（R？！ = g [c]）t（a.onAfterFirst）;删除g [c]}}）; t（a.onAfter）;函数t（b）{o.animate（g，j，a.easing，b＆amp;＆amp; ; function（）{b.call（this，l，a）}）}; function u（b）{var h ='scroll'+ b; if（！q）return k [h]; var f ='client '+ b，i = k.ownerDocument.documentElement，c = k.ownerDocument.body;返回Math.max（i [h]，c [h]） - Math.min（i [f]，c [f]） }}。）end（）}; function n（b）{return typeof b =='object'？b：{top：b，left：b}}}）（jQuery）;

/ * jQuery.LocalScroll - 动画滚动导航，使用锚点 - 版权所有（c）2007-2009 Ariel Flesler - aflesler（at）gmail（dot）com | http://flesler.blogspot.com - 在麻省理工学院和GPL下获得双重许可 - 日期：2009年3月11日 - @author Ariel Flesler - @version 1.2.7 / ;（function（$）{var l = location.href.replace（/# . /，''）; var g = $ .localScroll = function（a）{$（'body'）。localScroll（一个）}; g.defaults = {持续时间：1E3，轴： 'Y'，事件： '点击'，停止：真，目标：窗口，复位：真}; g.hash =函数（）{如果（位置.hash）{a = $ .extend（{}，g.defaults，a）; a.hash = false; if（a.reset）{var e = a.duration; delete a.duration; $（a.target ）.scrollTo（0，a）的a.duration = E} I（0，位置，A）}};。。$ fn.localScroll =函数（b）{b = $延伸（{}，g.defaults， b）;返回b.lazy？this.bind（b.event，function（a）{var e = $（[a.target，a.target.parentNode]）。filter（d）[0]; if（e ）I（A，E，b）}）：this.find（ '一个，区域'）的过滤器（d）.bind（b.event，函数的（a）{I（A，为此，b）}）。 end（）。end（）; function d（）{return !! this.href＆amp;＆amp; !! this.hash＆amp;＆amp; this.href.replace（this.hash，''）== l＆amp;＆amp;（！b.filter || $（this）.is（b.filter））}};函数i（a，e，b）{var d = e.hash.slice（1），f = document.getElementById（d ）|| document.getElementsByName（d）[0]; if（！f）return; if（a）a.preventDefault（）; var h = $（b.target）; if（b.lock＆amp;＆amp; h。是（ '：动画'）|| b.onBefore＆安培;＆安培; b.onBefore.c all（b，a，f，h）=== false）return; if（b.stop）h.stop（true）; if（b.hash）{var j = f.id == d？'id' ：'name'，k = $（''）。attr（j，d）.css（{position：'absolute'，top：$（window）.scrollTop（），left：$（window）.scrollLeft（） }）; F [J] = ''; $（ '主体'）前面加上（K）;位置= e.hash; k.remove（）; F [J] = d} h.scrollTo（F，b） .trigger（ 'notify.serialScroll'，并[f]）}}）（jQuery的）;

/ * Fire Horizontal Scroll * / $（document）.ready（function（）{$ .localScroll.defaults.axis ='x'; $ .localScroll（）;}）;

这是滑动div的html：

<div id="one">
            <div class="content">
                <ul class="bxslider">
                  <li><img src="img/coaching.jpg" title="" /></li>
                  <li><img src="img/girl_1.jpg" title="" /><span>"Magali is helpful, devoted and really involved in your success. Furthermore, she is a truly devoted person. She's not only a career coach but she is also personally involved and committed to the person she is working with."</span></li>
                  <li><img src="img/boy_1.jpg" title="" /><span>"Magali is very flexible with her clients and fully immerses herself in the desire to get to the core of your career needs. She is very organized with a positive outlook. Magali helped me find answers to some of the fundamental questions I had regarding my professional journey."</span></li>         
                  <li><img src="img/girl_2.jpg" title="" /><span>"Magali is an efficient and dedicated person who has helped me improve my CV and solicitation letters. She was very helpful when advising me on how to improve my interview skills."</span></li>
                  <li><img src="img/boy_2.jpg" title="" /><span>"Magali has been my career coach and adviser since last summer when I was lost in my professional orientation and I couldn't seem to succeed in job interviews anymore. She helped me to be confident again and after only one month I found a job and some new professional goals!"</span></li>
                  <li><img src="img/cheers.jpg" title="" /><a href="#eight" class="gtk">Schedule your <br />'Get to know' session</a></li>
                </ul>

                <h1>Career and Cross-Cultural Coaching<br /> for Expatriates and International Workers</h1>
                <h2>"Diversify your unique career"</h2>
                <ul>
                    <li>You are unaware of your strengths and what you should do for a living</li>
                    <li>You live abroad and you are now stuck in your career</li>
                    <li>You are unsure how to begin your job search and feel disoriented in an unfamiliar culture</li>
                    <li>You experience culture shock, you are uncertain on how to prepare for your relocation or have issues adapting to other cultures</li>
                </ul>
                <br />
                U Diverse helps you explore your dream career, hunt for your ideal job, successfully advance in your career and adapt seamlessly to a new culture.
            </div>
            <div class="wrapper">
                <a href="#two" class="next">><br />You are..</a>
            </div>
    </div>
    <div id="two">
        <div class="content">
            <h1>You are..</h1>
            <h2>"Uniquely diverse"</h2>
            <ul id="job_types">
                <li><img src="img/explorer.jpg" alt="" /><br />Explorer<span>You are unclear about the next step of your career and would like to explore<br /> different options.</span></li>
                <li><img src="img/conqueror.jpg" alt="" /><br />Conqueror<span>You are clear about the next steps of your career and you are now looking for the right opportunity.</span></li>
                <li><img src="img/hunter.jpg" alt="" /><br />Hunter<span>You are in the right career opportunity and you want to improve your satisfaction level and advance your career.</span></li>
                <li><img src="img/nomad.jpg" alt="" /><br />Global Nomad<span>You plan to work abroad or have moved abroad and need help transitioning into a new culture.</span></li>
            </ul>
            <br clear="all" />
        </div>
        <div class="wrapper">
            <a href="#three" class="next alt">><br />Explore..</a>
        </div>
    </div>

Answer 1

实际上它适用于chrome但不适用于firefox。在js文件jquery1.8.2.min中，它使用getPreventDefault（）这个函数被firefox浏览器自动弃用，但不是在chrome中，所以这就是你在firefox浏览器中进行水平滚动的原因。检查两个浏览器中的站点并检查控制台。

Answer 2

我通过使用脚本的jquery文件（1.3.2和1.8.2）并使用noconflict选项来修复它：http://www.w3schools.com/jquery/jquery_noconflict.asp

水平滚动无法在Chrome中使用

2 个答案: