是否有任何方法可以禁用用户的滚动,同时还可以更改应用程序本身可用的scrollTop和scrollLeft?
当我们说'滚动'时我们实际上是指Scroll,因为设置.style.margin,.style.transform或.style.left / top都会触发强制布局,这会导致我们需要支持的浏览器出现问题。
或者,是否有人知道Webkit(Safari)和Blink(Chrome)之间的特定区别会导致它们处理.style调用的强制布局如此不同?
我们有一个应用程序,由于各种原因需要渲染大约18,000个DOM节点,然后流畅地导航视口,以便用户在任何给定时间查看它们的特定集合。
这可以通过使用坐标系并在viewport元素上设置.style.left和.style.top在Chrome和Firefox中轻松完成,但当然访问和更改这些会强制布局。 Chrome和Firefox能够看到我们实际上并不需要这样做而且不这样做。但是,Safari实际上每次都会使用力布局,这会给用户带来近一秒的导航延迟。
访问.style的另一种方法是使用.scrollLeft和.scrollTop(我们已经尝试过使用转换,唉),但是这要求DOM节点的大块可滚动,这允许用户自己滚动blob(例如,鼠标滚轮或手机上的胖指),这是不可取的。
简而言之,我们希望应用程序能够在用户以特定方式告知特定位置时滚动到特定位置,但我们不希望用户能够在不与这些特定方式交互的情况下滚动元素,因为产生糟糕的用户体验。
我们知道渲染较少的内容会掩盖问题,我们已经在考虑这个问题,但这样做会锁定客户认为合适的某些行为。
/ edit /我们现在也尝试为我们可能需要的每个位置动态创建css类(是的,我们在浏览器调整大小时重新创建它们),甚至使用这些类来回避内联样式,我们从Safari获得布局脱粒。
显然溢出隐藏不是一个可继承的属性,所以我们假设如果父母做错了孩子就会拥有它。
因为根本没有在可滚动子项上设置溢出属性,所以在尝试时滚动失败。
当溢出隐藏被正确地应用于元素时,我们回收了滚动的能力,而不允许用户不期望地滚动。
......还觉得有点傻。