mootools_MooTools ScrollSpy，移动设备，JavaScript滚动事件和CSS定位

mootools

One question I've been asked often is why ScrollSpy and my Go To Top link functionality don't appear to work well on the iPhone, iPad, or any other mobile device.  The problem is simple to identify and easy to fix.  The issue comes down to the way mobile devices view fixed-positioned elements.  Let me explain to you the scenario, problem, and solution to making the "Go To Top" link follow the user as they scroll.

我经常被问到的一个问题是，为什么ScrollSpy和“ 转到顶部”链接功能在iPhone，iPad或任何其他移动设备上似乎无法正常工作。 该问题易于识别且易于修复。 问题归结于移动设备查看固定位置元素的方式。 让我向您解释使“ Go To Top”链接跟随用户滚动的情况，问题和解决方案。

View Demo 观看演示

ScrollSpy的/“转到顶部”的基本用法 (ScrollSpy's / "Go To Top" Basic Usage)

The first step will be creating the CSS for the "Go To Top" link.  The link will be styled to work well within the traditional browser since that's our priority.

第一步将为“转到顶部”链接创建CSS。 链接的样式将使其能够在传统浏览器中正常运行，因为这是我们的优先考虑。

#totop { 
	color:#090; 
	font-weight:bold; 
	text-shadow:1px 1px 0 #ccc; 
	bottom:10px; 
	right:10px; 
	font-size:1.1em; 
	position:fixed; 
	display:block; 
	z-index:10; 
}

The link is set to display 10px from the bottom of the screen at any given time.  The ScrollSpy usage is fairly simple;  when the "enter" threshold is met, the element fades in:

链接设置为在任何给定时间从屏幕底部开始显示10px。 ScrollSpy的用法非常简单。 当达到“输入”阈值时，该元素逐渐淡入：

// When the DOM is ready
window.addEvent("domready",function() {
	// Create the "top" link
	var top = new Element('a', { 
		id: 'totop', 
		text: 'Top', 
		styles: { opacity: 0 }, 
		href: '#top' 
	}).inject(document.body);
	// Create a ScrollSpy instance
	var spy = new ScrollSpy({
		min: 150,
		onEnter: function(pos) {
			top.fade(1);
		},
		onLeave: function(pos) {
			top.fade(0);
		}
	});
});

At this point, the "Go To Top" link functionality will work great within your typical web browser.  Your mobile browser?  Not so much.  Why?

此时，“转到顶部”链接功能将在典型的Web浏览器中很好地工作。 您的手机浏览器？ 没那么多。 为什么？

移动问题 (The Mobile Issue)

The reason you wont see the GTT link follow the browser as it scrolls is two fold:

您不会看到GTT链接跟随浏览器滚动的原因有两个：

1. Your mobile device's browser sees the the page as one "view", and pages downward.  Thus, fixing a link to the bottom keeps it there, regardless of where the user is in the page.
   您的移动设备的浏览器将页面视为一个“视图”，而页面向下。 因此，将链接固定到底部将使其保持在那里，而不管用户在页面中的何处。
2. The scroll event only fires at the end of the user's scroll, not during, so the link will not follow the user as they scroll.  Once the scroll ends, the link will "jump" down to the bottom of the view.
   滚动事件仅在用户滚动结束时触发，而不是在滚动结束时触发，因此链接在用户滚动时不会跟随用户。 滚动结束后，链接将“跳转”到视图的底部。

With those two details in mind, let's fix this scrolling CSS problem.

考虑到这两个细节，让我们解决此滚动CSS问题。

解决方案：onScroll上的位置重新分配 (The Solution:  Position Reassignment onScroll)

The only way to fix the scrolling problem is to adjust a few of the CSS settings we provided for the traditional browser.  Instead of using fixed positioning, we're going to use absolute positioning and we'll also update the CSS top setting to place the element within the viewport.

解决滚动问题的唯一方法是调整我们为传统浏览器提供的一些CSS设置。 我们将使用absolute定位，而不是使用fixed定位，并且还将更新CSS top设置以将元素放置在视口中。

// If this is an iOS mobile platform...
if(Browser.Platform.ios || Browser.Platform.android) {
	// Change styling of the TOP element's position
	top.setStyles({ 
		position: "absolute", 
		bottom: "auto" 
	});
	// Add a scroll event to...
	spy.addEvent("scroll",function(position) {
		// ...position the element
		 // 20px offset from bottom
		top.setStyle("top",(position.y + window.getSize().y - 20) + "px");
	});
}

One we establish that the client is a mobile browser, we swap out the positioning styles and add a scroll event to ScrollSpy to update the top position of the GTT link at the end of every scroll.  Probably easier than you thought, no? This solution was tested on iPad, iPhone, and Android.

我们确定客户端是移动浏览器，我们交换定位样式并将滚动事件添加到ScrollSpy，以在每次滚动结束时更新GTT链接的顶部位置。 可能比您想像的要容易，不是吗？ 该解决方案已在iPad，iPhone和Android上进行了测试。

View Demo 观看演示

There you have it!  The problem isn't with ScrollSpy;  it's with the way that mobile browsers handle fixed positioning.  No updates to ScrollSpy will be made on account of mobile, as ScrollSpy is simply used to get positioning information;  as long as the position information is provided, you can add positioning styles to desired elements.

你有它！ 问题不在于ScrollSpy。 移动浏览器可以处理固定位置。 不会因为移动设备而对ScrollSpy进行更新，因为ScrollSpy仅用于获取定位信息。 只要提供位置信息，就可以向所需元素添加定位样式。

翻译自: https://davidwalsh.name/scrollspy-mobile

mootools