Chrome中无法进行水平滚动

Horizontal scroll not working in Chrome

本文关键字:水平 滚动 Chrome      更新时间:2023-09-26

我有一个带水平滚动的网站。它适用于Firefox,但不适用于Chrome。

http://jellekok.com/customers/udiverse/

知道为什么它在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 */

(函数($){var m=$.scrollTo=函数(b,h,f){$(window).scrollTo(b,h,f)};m.defaults={axis:'xy',持续时间:parseFloat($.fn.jquery)>=1.3?0:1};m.window=函数(b){return$(window).screllable()};$。fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||$.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow|b).docent||b.ownerDocument||b;return$.browser.safari |f.compatMode=='BackCompat'?f.body:f.documentElement})};$。fn.scrollTo=函数(l,j,a){if(typeof j==‘object’){a=j;j=0}if(type of a==‘function’)a={onAfter:a};如果(l=='max')l=9e9;a=$.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&amp;a.轴线长度>1;如果(a.queue)j/=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');开关(类型为d){case'number':case'string':if(/^([+-]=)?''d+(.''d+)?(px)?$/.test(d)){d=n(d);break}d=$(d,this);case'object':if(d.is||d.style)p=(d=$(d)).offset()}$each(a.axis.split(''),函数(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='croll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;如果(a.over[i])g[c]+=ds.toLowerCase()*a.over[i]},则g[c]=d[i];如果(/^''d+$/.test(g[c]))g[c]=g[c]<0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]});t(a.onAfter);函数t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)};函数u(b){var h=‘croll’+b;if(!q)return k[h];var f=‘client’+b,i=k.ownerDocument.docentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}).end()};函数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年11月3日-@作者Ariel Flesler-@版本1.2.7/;(函数($){var l=location.href.replace(/#./,'');var g=$.localScroll=函数(a){$('body').localScrull(a)};g.defaults={持续时间:1e3,轴:'y',事件:'click',停止:true,目标:窗口,重置:true};g.hash=函数(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.durations;$(a.target).sollTo(0,a);a.duration=e}i(0,location,a)};$。fn.localScroll=函数(b){b=$.extend({},g.defaults,b);return b.懒惰?this.bind(b.event,function(a){var e=$([a.target,a.target.pparentNode]).filter(d)[0];if(e)i(a,e,b)};函数d(){return!!this.href&&!this.hash&this.href=replace(this.hash,'')=l&&(!b.filter ||$(this).is(b.filter))};函数i(a,e,b){var d=e.hash.sice(1),f=document.getElementById(d)||document.getElement ByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&b.onBever.call(b,a,f,h)==false)return;if(b.stop)h.stop(true);if'id':'name',k=$('').attr(j,d).css.rollLeft()});f[j]=''$('body').前缀(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])})(jQuery);

/*火焰水平卷轴*/$(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>

实际上它在chrome中有效,但在firefox中无效。在js文件jquery1.8.2.min中,它使用getPreventDefault()。这个函数会被firefox浏览器自动弃用,但在chrome中没有,所以这就是为什么在firefox中有水平滚动的原因。在两个浏览器中检查站点并检查控制台。

我通过使用脚本的jquery文件(1.3.2和1.8.2)和noconflict选项修复了它:http://www.w3schools.com/jquery/jquery_noconflict.asp