How do I smooth scrolling when using the mouse wheel in IE and Chrome

[BobFnord]

Howdy,

I've recently started using Muse, and began with generating a parallax scrolling webiste. My example site is here:

www.vurtartist.com/test

It's just a demo to learn Muse and see what it can do. The problem I ran into: scrolling using the mouse wheel. In FF, IE and Chrome the site scrolls fine when a user interacts with the menu or scroll bar, but when scrolling with the mouse wheel in Chrome or IE, the scroll effect is very choppy. I've also seen this happen on other sites made with muse, even on Adobe's example site on business catalyst (sorry I didn't save the URL, it has a horizontal scrolling effect with a hot air ballon). I've been trying to google this issue, and I mainly come across directions on how to enable "smooth scrolling" in various browsers. I also found some information on plugins or snippets of code that are supposed to smooth out scrolling, but I'm no developer so I'm not sure if this solves my problem. Again, the scrolling looks great when you use the menu or scroll bar, it just gets choppy with the mouse wheel in IE and Chrome (FF works fine). Other sites with parallax scrolling have silky smooth scrolling with the mouse wheel in IE and Chrome (example: http://www.numero10.ch/fr/home/). Has anyone else come across this? If so, is there a workaround? Thanks!

[GoatWar2000]

I also have this problem (choppy parallax using IE or Chrome + mouse wheel, windows 7 x64). Any solution would be appreciated...

Thanks.

[kmonk9000]

I too am having choppy scroll issues. In preview mode, it looks great in Chome on my machine at home, at work on a almost identical machine it is choppy in Chrome but looks great in FF.

[BobFnord]

I just checked out another Muse site of the day in Chrome and IE, it looks pretty bad when mouse wheel scrolling. Can someone from Adobe please acknowledge duplicating this issue, or someone with super front-end developer skills kick down some knowledge on a way to smooth this out? Thanks!

[kmonk9000]

Bob-

I hope you get your answer but I feel like this is the issue with Adobe products right now there are some really great innovations but fragmented into various applications. Edge Reflow for responsive layouts, Muse for creating websites visually without code skills and intresting tools like parallax, and of course Dreamweaver. It seems like alot of the fuctionality and selling points of Muse should be rolled into Dreramweaver and then accesed through a "design view" tab. That way, designers who don't want to code could create the the site, but they would have access to the code (or share it with a developer) if need be.  I am going to continue to build my site in Muse, with the issues and all and then export it to HTML to hand over to a developer who will hopefully be able to put the "gloss and polish" on the site (help with optimization, codeing menus and transistions ect) ...that's the plan at least. If that doesn't work, then I highly doubt I will return to using Muse, which I hope isn't the case because I see a huge potential in an application like this.

[kmonk9000]

Well I guess no one at Adobe is going to address this issue. I have run into it again this morning. I exported my site to HTML and uploaded it to my server to test. At home it loads and scrolls smooth on Chrome and Firefox. When I test it at work it scrolls "jumpy" and "laggy" on Chome and decent on Firefox (although some of the slower / smoother / smaller scrolling effects are hard to pick up). It really would be nice to have a reason / cause / solution for this.

[BobFnord]

Looks like this might be a Windows issue, friends have reported all seems well on other OS using the same browsers. A little dismayed by the lack of response to this, one would figure that the mouse wheel is a pretty common way for people to scroll, and scrolling seems to be a heavily marketed feature of Muse. Was hoping that the update perhaps addressed this, but it looks like IE and Chrome are behaving the same (at least on a Windows 7 64-bit box). Thanks Kmonk and Casino for the input, hoping someone from Adobe can acknowledge this and give us a work-around.

[JuPriceAdobe]

Hey everyone,

Sorry for the delay in noticing this one.

I'll talk with the devlopment team and get back to you. I can see what you are talking about on Chrome (OSX).

Cheers,

Justin Price

Community Manager

[kmonk9000]

Thanks! I am excited that Adobe has released some more updates for MUSE (100% width scrolling and improved parallax scrolling on IOS devices) I am looking forward to trying that out. As to the Windows vs Mac question-I continue to have lag / bouncy / jumpy (sorry for lack of techinacal terms) issues on Macs. I have had quite a few people test it and the results have been mixed, specially since it is hard to explain to them what they should be looking for when it comes to parallax smoothness. Hopefully, this will be a bug that can be duplicated easily so that a solution can be produced.

Thanks again!

[dust_eff]

Has anyone received an update on this item? Scrolling is still very choppy in browser, even when published.

Thanks so much!

D

[Desmond_Chang]

I'm also having this problem, and it has been a year since the first post has been posted. Will there ever be a fix to this problem?

[CoolConnecter]

I too am having the same issues...

Although its only just started becoming a problem on both my macs.

I've looked at ways to reduce the juddering and from what I've found the only way to reduce the amount of judder is to reduce the amount of parallax scrolling I'm using... bringing it right down to a minimum (keeping the scroll effect to backgrounds, not text and vectors)

i hope that this helps some... to many probably not.

[VMSDesigns]

I am almost a year latenow. But I think I have the solution of this problem. It will not solve the choppiness of the parallax scrolling. But this script will make the vertical moment smooth with mouse wheel. Just like in Mozilla Firefox. Simply paste this script in the Head of your website & see the magic.

<script>

function ssc_init(){if(document.body){var e=document.body,s=document.documentElement,c=window.innerHeight,t=e.scrollHeight;if(ssc_root=document.compatMode.indexOf("CSS")>=0?s:e,ssc_activeElement=e,ssc_initdone=!0,top!=self)ssc_frame=!0;else if(t>c&&(e.offsetHeight<=c||s.offsetHeight<=c)&&ssc_root.offsetHeight<=c){var r=document.createElement("div");r.style.clear="both",e.appendChild(r)}ssc_fixedback||(e.style.backgroundAttachment="scroll",s.style.backgroundAttachment="scroll"),ssc_keyboardsupport&&ssc_addEvent("keydown",ssc_keydown)}}function ssc_scrollArray(e,s,c,t){if(t||(t=1e3),ssc_directionCheck(s,c),ssc_que.push({x:s,y:c,lastX:0>s?.99:-.99,lastY:0>c?.99:-.99,start:+new Date}),!ssc_pending){var r=function(){for(var o=+new Date,n=0,a=0,i=0;i<ssc_que.length;i++){var l=ssc_que,_=o-l.start,u=_>=ssc_animtime,d=u?1:_/ssc_animtime;ssc_pulseAlgorithm&&(d=ssc_pulse(d));var f=l.x*d-l.lastX>>0,m=l.y*d-l.lastY>>0;n+=f,a+=m,l.lastX+=f,l.lastY+=m,u&&(ssc_que.splice(i,1),i--)}if(s){var p=e.scrollLeft;e.scrollLeft+=n,n&&e.scrollLeft===p&&(s=0)}if(c){var h=e.scrollTop;e.scrollTop+=a,a&&e.scrollTop===h&&(c=0)}s||c||(ssc_que=[]),ssc_que.length?setTimeout(r,t/ssc_framerate+1):ssc_pending=!1};setTimeout(r,0),ssc_pending=!0}}function ssc_wheel(e){ssc_initdone||ssc_init();var s=e.target,c=ssc_overflowingAncestor(s);if(!c||e.defaultPrevented||ssc_isNodeName(ssc_activeElement,"embed")||ssc_isNodeName(s,"embed")&&/\.pdf/i.test(s.src))return!0;var t=e.wheelDeltaX||0,r=e.wheelDeltaY||0;t||r||(r=e.wheelDelta||0),Math.abs(t)>1.2&&(t*=ssc_stepsize/120),Math.abs(r)>1.2&&(r*=ssc_stepsize/120),ssc_scrollArray(c,-t,-r),e.preventDefault()}function ssc_keydown(e){var s=e.target,c=e.ctrlKey||e.altKey||e.metaKey;if(/input|textarea|embed/i.test(s.nodeName)||s.isContentEditable||e.defaultPrevented||c)return!0;if(ssc_isNodeName(s,"button")&&e.keyCode===ssc_key.spacebar)return!0;var t,r=0,o=0,n=ssc_overflowingAncestor(ssc_activeElement),a=n.clientHeight;switch(n==document.body&&(a=window.innerHeight),e.keyCode){case ssc_key.up:o=-ssc_arrowscroll;break;case ssc_key.down:o=ssc_arrowscroll;break;case ssc_key.spacebar:t=e.shiftKey?1:-1,o=-t*a*.9;break;case ssc_key.pageup:o=.9*-a;break;case ssc_key.pagedown:o=.9*a;break;case ssc_key.home:o=-n.scrollTop;break;case ssc_key.end:var i=n.scrollHeight-n.scrollTop-a;o=i>0?i+10:0;break;case ssc_key.left:r=-ssc_arrowscroll;break;case ssc_key.right:r=ssc_arrowscroll;break;default:return!0}ssc_scrollArray(n,r,o),e.preventDefault()}function ssc_mousedown(e){ssc_activeElement=e.target}function ssc_setCache(e,s){for(var c=e.length;c--;)ssc_cache[ssc_uniqueID(e)]=s;return s}function ssc_overflowingAncestor(e){var s=[],c=ssc_root.scrollHeight;do{var t=ssc_cache[ssc_uniqueID(e)];if(t)return ssc_setCache(s,t);if(s.push(e),c===e.scrollHeight){if(!ssc_frame||ssc_root.clientHeight+10<c)return ssc_setCache(s,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow"),"scroll"===overflow||"auto"===overflow))return ssc_setCache(s,e)}while(e=e.parentNode)}function ssc_addEvent(e,s,c){window.addEventListener(e,s,c||!1)}function ssc_removeEvent(e,s,c){window.removeEventListener(e,s,c||!1)}function ssc_isNodeName(e,s){return e.nodeName.toLowerCase()===s.toLowerCase()}function ssc_directionCheck(e,s){e=e>0?1:-1,s=s>0?1:-1,(ssc_direction.x!==e||ssc_direction.y!==s)&&(ssc_direction.x=e,ssc_direction.y=s,ssc_que=[])}function ssc_pulse_(e){var s,c,t;return e*=ssc_pulseScale,1>e?s=e-(1-Math.exp(-e)):(c=Math.exp(-1),e-=1,t=1-Math.exp(-e),s=c+t*(1-c)),s*ssc_pulseNormalize}function ssc_pulse(e){return e>=1?1:0>=e?0:(1==ssc_pulseNormalize&&(ssc_pulseNormalize/=ssc_pulse_(1)),ssc_pulse_(e))}var ssc_framerate=150,ssc_animtime=500,ssc_stepsize=150,ssc_pulseAlgorithm=!0,ssc_pulseScale=6,ssc_pulseNormalize=1,ssc_keyboardsupport=!0,ssc_arrowscroll=50,ssc_frame=!1,ssc_direction={x:0,y:0},ssc_initdone=!1,ssc_fixedback=!0,ssc_root=document.documentElement,ssc_activeElement,ssc_key={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},ssc_que=[],ssc_pending=!1,ssc_cache={};setInterval(function(){ssc_cache={}},1e4);var ssc_uniqueID=function(){var e=0;return function(s){return s.ssc_uniqueID||(s.ssc_uniqueID=e++)}}(),ischrome=/chrome/.test(navigator.userAgent.toLowerCase());ischrome&&(ssc_addEvent("mousedown",ssc_mousedown),ssc_addEvent("mousewheel",ssc_wheel),ssc_addEvent("load",ssc_init));

</script>

[Sterling Williams]

I didn't notice this 'choppy ' parallax backgrounds issue until recently.... WTH? and I tried the above code, put in my master head and still no good, wow why would Muse get 'worse' as far as parallax?  The Web Stylist - CONTACT for a Flat Rate site design quote

[Zak_Williamson__Adobe_]

A Chrome update awhile back broke the timing of scroll event dispatching which resulted in this choppiness. There's a partial workaround in the code generated by Muse 2015.0. It improves the behavior in most cases, but it's still not as good as it was. A bug was submitted in Google's bug system or Chrome back when the bug was first identified.

[samuels73836299]

Hi Zak,

I'm still experiencing severe issues with scroll effects in Muse, regardless of my web browser (Safari, Chrome, etc.). I'm actually very surprised this isn't documented better.

This is an example of how my website functions currently. The jitteriness isn't just aesthetically unpleasing; it's unacceptable from a performance standpoint. Again, this is the case no matter which web browser is being used.

http://mysite-jul52015-434.businesscatalyst.com/index.html

In contrast, this is an example of a site that functions the way I want mine to (notice how perfectly smooth this site is as opposed to mine):

http://www.alexhonnold.com/#intro

Please advise.

Thanks for your help.

[DezzieDC]

Mine is doing a similar thing however it seems to be worse in IE.  The images contained in the parallax are very choppy when controlling the scroll bar with the mouse button (click and hold and move the bar up and down).  It is smoother in Chrome but still not as smooth as the alexhonnold site above.

[rahul.nexgi]

Please try this out, always work for me

//paste this code to scripts/jquery.watch.js 

jQuery.extend(jQuery.easing, {

    easeOutQuint: function(x, t, b, c, d) {

        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;

    }

});

var wheel = false,

    $docH = $(document).height() - $(window).height(),

    $scrollTop = $(window).scrollTop();

$(window).bind('scroll', function() {

    if (wheel === false) {

        $scrollTop = $(this).scrollTop();

    }

});

$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {

    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;

    wheel = true;

    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 60)));

    $($.browser.webkit ? 'body' : 'html').stop().animate({

        scrollTop: $scrollTop + 'px'

    }, 2000, 'easeOutQuint', function() {       

        wheel = false;

    });

    return false;

});

Also you can control the speed of the scroll by changing it from 2000 (5th last line of code)  to any other number.

[wqertyuoiuytrew]

This worked for me! Thanks!!

[rahul.nexgi]

Cheers..!

[yogoaditomo]

its work for me, thank u a lot of

[ronb27748929]

I tried this Script and couldn't get it to work, I pasted it to the top  (didn't work) and tried pasting at the bottom of the scripts/jquery.watch.js . (tried changing the number as well, but seemed like it had no effect) Not sure what i am doing wrong. I'd sure like to get IE and chrome to scroll smoother. I used Notepad to do it...is that what i did wrong? Any help would be greatly appreciated.

[sergiolopez94]

Guys... I f you're working with pictures, try using Photoshop's "Save for Web" feature or use Lightroom to export the image a limit the size to 500kb or less. This has worked for me many times