März 7, 2018 Allgemein Keine Kommentare

Ein Kunde von uns wollte ein feststehendes Menü am oberen Rand der Website. Das Menü brachte aber ein größeres Problem mit sich: Im Microsoft Internet Explorer und dem neuen Pendant Edge war das Scrollen alles andere als schön. Vielmehr hüpfte der Bereich immer hoch und runter. Das liegt an einem Bug in der Smooth Scrolling-Funktion des MSIE, der bereits seit vielen Jahren bekannt ist. Aber Microsoft ist ja bekannt dafür, dass sie solche Fehler ignorieren und dass die Designer Workarounds nutzen müssen.

Die Funktion ist jedenfalls standardmäßig aktiv. Wird sie ausgeschaltet ist alles gut. Aber man kann ja schlecht dem User sagen: Schalt mal den Bug von MS aus, damit unsere Site gut aussieht. Also musste es eine Möglichkeit geben die Funktion von uns aus auszuschalten. Es war eine lange Recherche und sie endete zunächst bei einer Javascript-Funktion, die aber nicht funktionieren wollte. Das lag daran, dass die Erkennung des MSIE und des Edge nicht sauber lief. Letztendlich halt die Kombination aus mehreren Skripten.

Der nachfolgende Code ist für WordPress geschrieben. Dort ist es wichtig, das die Funktion von jQuery etwas anders angesprochen wird. Dies muss für andere Sites eventuell angepasst werden. Der Code funktioniert jedenfalls derzeit sehr gut und ist hoffentlich eine Hilfe für andere Designer, die genau denselben Schmerz verspüren, wenn sie nur MSIE hören.

</p>
<p>jQuery(document).ready(function($)<br />
	{<br />
	function GetIEVersion()<br />
		{</p>
<p>		var sAgent = navigator.userAgent;<br />
		var Idx = sAgent.indexOf(&quot;MSIE&quot;);<br />
		// If IE, return version number.<br />
		if (Idx &gt; 0)<br />
			{<br />
			return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(&quot;.&quot;, Idx)));<br />
			}<br />
		// If IE 11 then look for Updated user agent string.<br />
		else if (!!navigator.userAgent.match(/Trident\/7\./))<br />
			 {<br />
			 return 11;<br />
			 }<br />
		else<br />
			{<br />
			return 0;<br />
			}<br />
		}</p>
<p>	if (GetIEVersion() &gt; 0)<br />
		{<br />
		// if IE<br />
        $('body').on(&quot;mousewheel&quot;, function ()<br />
			{<br />
            // remove default behavior<br />
			event.preventDefault ? event.preventDefault() : (event.returnValue = false);<br />
      		var wd = event.wheelDelta;<br />
      		var csp = window.pageYOffset;<br />
      		window.scrollTo(0, csp - wd);<br />
			});<br />
		}</p>
<p>	if (navigator.userAgent.indexOf('Edge') &gt;= 0)<br />
		{<br />
		// if Edge<br />
		$('body').on(&quot;DOMMouseScroll mousewheel wheel&quot;, function ()<br />
			{<br />
            // remove default behavior<br />
            event.preventDefault(); </p>
<p>            //scroll without smoothing<br />
            var wheelDelta = event.wheelDelta;<br />
            var currentScrollPosition = window.pageYOffset;<br />
            window.scrollTo(0, currentScrollPosition - wheelDelta);<br />
        	});<br />
		}<br />
	});</p>
<p>

Written by Bernd Glasstetter