google chrome - jQuery scrollLeft not working with overflow-x -

google chrome - jQuery scrollLeft not working with overflow-x -

here fiddle: http://jsfiddle.net/pj39dw5x/6/

html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow-x: hidden; text-align: center; } div#all{ width: 200%; height: 100%; } div.menu{ position: fixed; top: 0; left: 0; } div.wrap{ width: 50%; float: left; } div.body{ text-align: left; margin: 0 auto; max-width: 960px; width: 100%; padding-top: 100px; } $('a[href*=#]').on('click', function(event){ if($(this).hasclass('external')===false){ event.preventdefault(); $('html,body').animate({scrollleft:$(this.hash).offset().left},500); $('html,body').animate({scrolltop:$(this.hash).offset().top},500); } }); <div id="all"> <div class="menu"><a href="#kotva1">lorem</a> <a href="#kotva2">ipsum</a> </div> <div class="wrap"> <div class="body" id="kotva1"> <p>dolor sit down amet, consectetur adipiscing elit. mauris sed massa et ante congue tempus sed lobortis risus. nulla pretium egestas velit vel tristique. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos. suspendisse accumsan leo nec maximus hendrerit. quisque sed pellentesque mi. vivamus justo tellus, maximus viverra neque eu, commodo pellentesque sem. curabitur ac velit non dolor auctor vulputate. fusce volutpat lectus consectetur, vestibulum nisl nec, molestie orci. maecenas pellentesque fringilla vehicula. <p>mauris finibus sem eget placerat lobortis. nunc et nisi quis ipsum rutrum volutpat quis sed mi. donec et neque sollicitudin, dictum orci auctor, sagittis nisl. phasellus consectetur porttitor gravida. sed luctus augue suscipit tristique feugiat. in magna velit, mollis in aliquet tristique, ornare vel elit. duis fringilla sollicitudin elit. mauris tortor odio, maximus sed tincidunt id, accumsan nec lacus. maecenas quis pharetra mi. nam arcu lectus. curabitur cursus erat tincidunt, cursus dolor eget, porttitor tortor. praesent vitae diam feugiat, lobortis risus vel, dapibus tellus. donec dignissim libero @ risus porttitor, viverra ex scelerisque. <p>nulla vel urna orci. nullam pretium odio sit down amet neque aliquet, ac scelerisque odio tempor. fusce nec arcu eget risus commodo dapibus @ in felis. nam risus lectus, pulvinar eget elementum eu, accumsan risus. vestibulum id leo commodo justo suscipit pulvinar. etiam porta malesuada aliquet. sed ex metus, auctor european union libero eget, tristique auctor erat. nam ante purus, porta in dolor ac, feugiat bibendum nibh. cras tristique hendrerit vulputate. <p>integer fringilla congue egestas. aenean sodales lobortis lorem, ut dictum mi ultricies id. duis in turpis rutrum lectus tempor cursus. in dapibus, turpis european union eleifend eleifend, metus erat tempor ipsum, european union posuere libero tellus diam. duis fringilla quam turpis, commodo purus aliquet non. nam interdum pretium massa id pellentesque. nulla consectetur facilisis diam, eget ullamcorper lectus malesuada nec. nullam tempor massa eros, eget finibus ligula laoreet a. nam eget mi sapien. vestibulum non magna diam tempus mattis in vel est. nam european union suscipit magna, id viverra nunc. nulla facilisi. mauris suscipit dui lacinia semper. quisque dictum, lacus tempor auctor, metus neque eleifend arcu, id eleifend turpis eros quis mi. fusce venenatis sodales augue, nec blandit neque. <p>pellentesque id dapibus nisi, sed posuere tellus. ut pulvinar european union quam in varius. sed sem est, rhoncus european union purus non, vehicula tristique odio. mauris ut enim sed ante faucibus fringilla sit down amet in turpis. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos. pellentesque et interdum arcu. integer elementum id ante id blandit. vestibulum non tellus lacinia ipsum hendrerit dignissim eget @ purus. vivamus mattis felis arcu, european union maximus leo euismod id. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. duis quis dictum lacus, rutrum est. mauris eget maximus purus. mauris porta felis quis lacus feugiat placerat volutpat ac dui. phasellus lacinia odio et ipsum blandit, @ vestibulum elit dictum. morbi imperdiet, odio bibendum lobortis, nisi ante viverra metus, european union bibendum libero sem @ ligula. </div> </div> <div class="wrap" id="kotva2"> <div class="body"> <p>consectetur adipiscing elit. mauris faucibus ligula ac arcu lacinia tincidunt. mauris porttitor felis ac velit viverra semper. nulla facilisi. in hendrerit lacus ut arcu ultrices elementum. ut porttitor risus sem, @ fringilla sem luctus vitae. maecenas cursus turpis eget eros mattis tristique. in fringilla sem leo, vitae laoreet urna efficitur ut. aenean ac nulla vitae sapien egestas efficitur vel egestas lacus. quisque eleifend sed augue nec consequat. quisque interdum facilisis odio, id vulputate risus euismod nec. <p>donec venenatis odio vel mi euismod, non lobortis est pretium. donec vestibulum ante ut faucibus eleifend. nunc vel urna arcu. integer id dolor non diam tristique sagittis. nullam venenatis nunc et libero euismod molestie. fusce fringilla placerat lectus. phasellus tempus, magna fermentum viverra, neque lacus sodales dui, nec molestie nisi risus sit down amet lorem. <p>aenean eleifend cursus vestibulum. vestibulum auctor ligula id felis dignissim, id ultricies magna volutpat. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; nullam non convallis ipsum, in malesuada leo. donec ut quam enim. mauris sagittis mollis est, id mollis purus volutpat eu. sed malesuada sed leo non luctus. aenean eros ligula, porta et eros vel, gravida mattis dui. <p>integer european union urna in est aliquet pretium non elementum arcu. nam condimentum nibh quis semper imperdiet. quisque ut consequat tellus. aenean rhoncus quis metus ut sagittis. in convallis porta erat et iaculis. aliquam erat volutpat. ut diam metus, luctus nec massa vitae, vehicula aliquam urna. nam consectetur convallis risus et malesuada. integer ut mattis ligula, dictum eleifend ipsum. curabitur et pretium metus. aenean nec metus in sem finibus ultricies sit down amet placerat diam. etiam sit down amet erat ligula. sed sollicitudin pellentesque sem european union dignissim. ut diam augue, mattis ac nisi tempor, porta gravida nunc. etiam eget dui suscipit, tempus lacus ac, gravida ligula. <p>nullam non convallis erat. etiam ullamcorper nunc vestibulum, tempor enim eu, laoreet dolor. phasellus blandit massa quis eros condimentum tempus. nullam vehicula interdum sapien european union pulvinar. curabitur nisl lectus, finibus sem at, pulvinar blandit ex. donec porttitor interdum nibh vitae lobortis. morbi euismod lectus semper venenatis tincidunt. nunc dapibus finibus est quis venenatis. in pulvinar tellus vel bibendum fermentum. morbi faucibus pulvinar ultricies. quisque rhoncus varius nisl, in consequat sem accumsan quis. donec est sem, condimentum in purus quis, ornare congue ex. aenean nec ultrices risus. </div> </div> </div>

this fiddle works fine in firefox, bude chrome scrollleft doesn't work anyway overflow-x: hidden; on html, body element.

hack

element.css({‘overflow': ‘auto’}).scrollleft(); element.css({‘overflow': ‘hidden’});

doesn't help me...

i need 2 columns of content , if click on menu, need scroll left/right first , scroll up/down right hash. content must have 960px , must centered on fiddle above.

can help me?

jquery google-chrome overflow