解决微信下，后退时，页面滚动到顶部的问题

e9b424e3 · hbcui1984 · b615c82a · e9b424e3 · e9b424e3 · e9b424e3
Commit e9b424e3 authored Nov 30, 2015 by hbcui1984
11 changed files
--- a/dist/css/mui.css
+++ b/dist/css/mui.css
@@ -5013,6 +5013,8 @@ select:focus
    position: absolute;
    right: 0;
    left: 0;
+    -webkit-overflow-scrolling: touch;
 }
 .mui-iframe-wrapper iframe
 {

--- a/dist/css/mui.min.css
+++ b/dist/css/mui.min.css
--- a/dist/js/mui.js
+++ b/dist/js/mui.js
@@ -1902,6 +1902,27 @@ Function.prototype.bind = Function.prototype.bind || function(to) {
 		iframe.name = iframe.id;
 		wrapper.appendChild(iframe);
 		document.body.appendChild(wrapper);
+		//目前仅处理微信
+		$.os.wechat && handleScroll(wrapper, iframe);
+	};
+	function handleScroll(wrapper, iframe) {
+		var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
+		var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
+		if (scrollTop) {
+			(function(y) {
+				iframe.onload = function() {
+					window.scrollTo(0, y);
+				};
+			})(scrollTop);
+		}
+		setInterval(function() {
+			var _scrollTop = window.scrollY;
+			if (scrollTop !== _scrollTop) {
+				localStorage.setItem(key, _scrollTop + '');
+				scrollTop = _scrollTop;
+			}
+		}, 100);
 	};
 	$(function() {
 		var classList = document.body.classList;

--- a/dist/js/mui.min.js
+++ b/dist/js/mui.min.js
--- a/examples/hello-mui/css/mui.css
+++ b/examples/hello-mui/css/mui.css
@@ -5013,6 +5013,8 @@ select:focus
    position: absolute;
    right: 0;
    left: 0;
+    -webkit-overflow-scrolling: touch;
 }
 .mui-iframe-wrapper iframe
 {

--- a/examples/hello-mui/css/mui.min.css
+++ b/examples/hello-mui/css/mui.min.css
--- a/examples/hello-mui/examples/setting.html
+++ b/examples/hello-mui/examples/setting.html
@@ -159,7 +159,7 @@
 		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
 	</head>
-	<body>
+	<body class="mui-fullscreen">
 		<!--页面主结构开始-->
 		<div id="app" class="mui-views">
 			<div class="mui-view">

--- a/examples/hello-mui/js/mui.js
+++ b/examples/hello-mui/js/mui.js
@@ -1902,6 +1902,27 @@ Function.prototype.bind = Function.prototype.bind || function(to) {
 		iframe.name = iframe.id;
 		wrapper.appendChild(iframe);
 		document.body.appendChild(wrapper);
+		//目前仅处理微信
+		$.os.wechat && handleScroll(wrapper, iframe);
+	};
+	function handleScroll(wrapper, iframe) {
+		var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
+		var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
+		if (scrollTop) {
+			(function(y) {
+				iframe.onload = function() {
+					window.scrollTo(0, y);
+				};
+			})(scrollTop);
+		}
+		setInterval(function() {
+			var _scrollTop = window.scrollY;
+			if (scrollTop !== _scrollTop) {
+				localStorage.setItem(key, _scrollTop + '');
+				scrollTop = _scrollTop;
+			}
+		}, 100);
 	};
 	$(function() {
 		var classList = document.body.classList;

--- a/examples/hello-mui/js/mui.min.js
+++ b/examples/hello-mui/js/mui.min.js
--- a/js/mui.init.js
+++ b/js/mui.init.js
@@ -95,6 +95,27 @@
 		iframe.name = iframe.id;
 		wrapper.appendChild(iframe);
 		document.body.appendChild(wrapper);
+		//目前仅处理微信
+		$.os.wechat && handleScroll(wrapper, iframe);
+	};
+	function handleScroll(wrapper, iframe) {
+		var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
+		var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
+		if (scrollTop) {
+			(function(y) {
+				iframe.onload = function() {
+					window.scrollTo(0, y);
+				};
+			})(scrollTop);
+		}
+		setInterval(function() {
+			var _scrollTop = window.scrollY;
+			if (scrollTop !== _scrollTop) {
+				localStorage.setItem(key, _scrollTop + '');
+				scrollTop = _scrollTop;
+			}
+		}, 100);
 	};
 	$(function() {
 		var classList = document.body.classList;

--- a/sass/iframe.scss
+++ b/sass/iframe.scss
 .#{$namespace}iframe-wrapper{
+    -webkit-overflow-scrolling:touch;
    position: absolute;
    left: 0;
    right: 0;