时间戳

首页 > 解决方案 > （Chrome 错误？） pointer-events : none ，防止在 Chrome Android 78 上滚动

html - （Chrome 错误？） pointer-events : none ，防止在 Chrome Android 78 上滚动

问题描述

[更新]，错误提交：https ://bugs.chromium.org/p/chromium/issues/detail?id=1011866&q=pointer-events&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary %20OS%20已修改

我意识到现在在 Chrome 78.0.3904（Android 9）上，应用pointer-events:none到固定位置的覆盖元素会阻止下面的元素被滚动。

我在我制作的网站中大量使用了这种技术，它一直运行良好，直到我意识到今天它被打破了。但它在所有其他设备和浏览器上仍然可以正常工作。以 IOS 上的 Safari 为例。

我做了一个简单的测试，附在下面，您可以尝试在 android chrome 浏览器上查看问题。

这里还有一个具有相同测试的外部网址：https ://www.fariskassim.com/stage/rebel9/democracy_museum/sandbox/chrome_bug/

		.overlay {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    z-index: 10;
		    background-color: rgba(255, 0, 0, 0.5);
		    pointer-events: none;
		}

		.scrollable_content {
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;;
			overflow:auto;
		}
	<div class="overlay"></div>

	<div class="scrollable_content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet justo at sapien vulputate, dictum pellentesque turpis ultricies. Quisque pellentesque maximus ultrices. Vivamus tempus sem vehicula varius laoreet. Donec gravida sit amet lorem ac molestie. Nunc eget lobortis turpis. Praesent fringilla quam non ligula bibendum, vel consectetur orci lobortis. Morbi a efficitur augue. Donec in nisl pellentesque, scelerisque arcu non, dictum augue.

		Nam purus augue, auctor vitae purus et, gravida viverra velit. Vivamus a massa euismod, luctus leo sed, maximus eros. Phasellus egestas varius euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium magna a justo vestibulum, mattis efficitur enim consequat. Nunc malesuada leo sed turpis rhoncus cursus. Phasellus mollis elementum magna ac varius.

		Sed varius dui non leo fermentum, eu aliquet risus bibendum. Duis ac diam tellus. Nullam eleifend sed dui eu iaculis. Nulla nec ultrices turpis, at tempor enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam venenatis porttitor mauris, et consequat tortor euismod quis. Donec at tortor convallis, convallis urna eu, fermentum justo.

		Cras egestas, turpis eget sodales egestas, lacus erat hendrerit diam, id dapibus augue enim sit amet justo. Nullam a augue ac diam convallis placerat at id lacus. In eu ipsum dui. Nunc lacinia molestie ligula, id suscipit erat. Praesent euismod eget nunc non facilisis. Aenean quis ipsum egestas, dictum sem sit amet, vestibulum arcu. Phasellus pretium id sem a euismod. Fusce eu ornare purus. Vestibulum porttitor augue a suscipit volutpat. Curabitur sodales urna libero, sed posuere odio lacinia ut. Cras quis mauris augue.

		Ut augue quam, elementum non ante in, blandit lacinia ex. Vestibulum in lectus pulvinar, faucibus nisi tincidunt, placerat dolor. Ut lacinia risus nunc, eget blandit dolor malesuada in. Donec at urna ac orci pulvinar lobortis. Donec aliquet ex nec faucibus suscipit. Nulla libero arcu, efficitur ut elit vel, congue egestas massa. Etiam laoreet odio leo, ut vehicula nunc consequat fringilla. Nam arcu mauris, vehicula sed sagittis a, sodales et felis. Pellentesque in hendrerit orci. Sed ornare tristique turpis sed ultrices.

		Aliquam mollis mi sit amet ex lacinia, sed sollicitudin ipsum efficitur. Ut elementum vulputate luctus. Duis id mollis eros. Praesent pellentesque, augue nec vestibulum finibus, est elit faucibus quam, eu condimentum dui mi at erat. Duis varius ullamcorper auctor. Suspendisse potenti. Mauris quis justo venenatis, lacinia diam eu, gravida augue. Ut in magna arcu. Etiam nec arcu ex. Phasellus ut nibh leo. Proin consectetur lacus risus, et sodales nisi luctus placerat. Maecenas eget fringilla sem, vitae sagittis nisi. Mauris et maximus velit. Fusce a velit sed quam porttitor suscipit vitae nec lectus.

		Nulla lobortis ligula condimentum elit pellentesque vulputate. Aenean ac nisl in metus tincidunt viverra. Integer risus urna, fringilla ac metus ac, congue feugiat nulla. Donec dui risus, gravida eu tempor iaculis, vulputate at ante. Donec cursus elit ac ipsum pretium, non dapibus arcu vehicula. Nulla porttitor urna a lectus molestie, vitae dictum enim varius. Sed justo turpis, rhoncus eget tortor ut, rhoncus condimentum ante. Nulla erat est, interdum pulvinar diam vitae, fringilla interdum risus. Donec maximus, nisl ac tristique tincidunt, lacus metus posuere nisl, a viverra ante dolor in libero. Donec eleifend congue lectus. Maecenas sed mattis nisl. Vivamus lectus eros, interdum eu congue quis, fermentum at odio. Nullam maximus ligula in posuere viverra. Donec vitae consequat nisi. Fusce nibh ex, aliquam et erat a, varius congue nisi.

		Integer tristique sodales enim at ultrices. Integer at lobortis felis. Maecenas et justo imperdiet justo tempor dapibus. Donec convallis tortor sit amet commodo condimentum. Sed maximus ipsum nec sapien cursus, id molestie est sodales. Curabitur nisi justo, scelerisque vitae sagittis at, ultricies at odio. Nulla commodo libero eros, quis convallis tortor finibus quis. Vivamus ipsum lorem, tristique eu lobortis vitae, imperdiet sit amet ipsum. Sed eget volutpat lacus. Phasellus sit amet sapien lacus. Mauris sollicitudin facilisis sapien, bibendum ornare libero ultricies non. Vivamus magna augue, maximus vitae turpis vitae, tincidunt ornare magna. Donec aliquet diam nec lobortis imperdiet. Sed non tellus a est laoreet pharetra. Donec eleifend porta nisl, ac euismod elit fermentum at.

		Vestibulum maximus dui sed nisi sollicitudin, quis lacinia lectus viverra. Praesent dictum viverra ipsum ut finibus. Proin eget accumsan nulla. Nulla finibus viverra orci, a rhoncus enim condimentum vitae. Vivamus lacinia eros ante, in pellentesque diam sodales sit amet. Ut ut nibh ex. Proin aliquet ornare erat. Suspendisse ullamcorper condimentum libero nec molestie. Quisque fringilla lectus neque, at suscipit ex congue nec. Nullam accumsan vitae nisi eget lobortis. Pellentesque quis imperdiet dui, non porttitor ante. Mauris ipsum ante, accumsan commodo vulputate ut, fringilla id mauris. Duis pretium vulputate sapien sit amet sodales.

	</div>

标签： htmlcssgoogle-chromepointer-events

解决方案

是的！！也许新的 Chrome 版本不支持这种技术。尝试使用以下代码片段：

.scrollable_content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 11;
    opacity: .8;
}

我认为这可能不会提供与您定义的相同的输出，但它看起来要好一些。

推荐阅读