是否可以在启用JavaScript的同时为用户禁用滚动功能?

时间:2019-04-03 15:17:10

标签: javascript layout scroll safari single-page-application

是否有任何方法可以为用户禁用滚动功能,同时又可以为应用程序本身提供更改的功能,例如scrollTop和scrollLeft?

当我们说“滚动”时,我们实际上是指Scroll,因为设置.style.margin,.style.transform或.style.left / top都会触发强制布局,这会导致我们需要支持的浏览器出现问题。

或者,有人知道Webkit(Safari)和Blink(Chrome)之间的具体区别是什么导致它们处理.style调用的强制布局有何不同?

我们有一个应用程序,由于各种原因,该应用程序需要渲染大约18,000个DOM节点,然后流畅地导航视口,以便用户在任何给定时间查看它们中的特定集合。

在Chrome和Firefox中,可以通过使用坐标系并在视口元素上设置.style.left和.style.top轻松实现此目的,但是当然访问和更改这些元素会强制布局。 Chrome和Firefox可以看到我们实际上并不需要这样做。但是,Safari实际上每次都会经过强制布局,这会给用户带来近一整秒的导航滞后。

访问.style的另一种方法是使用.scrollLeft和.scrollTop(las,我们已经尝试过使用transforms了),但这要求DOM节点的大对象是可滚动的,从而允许用户自己在blob中滚动(例如,使用手机上的鼠标滚轮或胖手指),这是不希望的。

简而言之,我们希望应用程序能够在用户以特定方式告诉用户时滚动到特定位置,但是我们不希望用户在不与那些特定方式交互的情况下能够在元素上滚动,因为这会带来糟糕的用户体验。

我们知道呈现较少的内容将掩盖该问题,我们已经在调查这一问题,但是这样做会锁定客户认为合乎需要的某些行为。

/ edit /我们现在还尝试为可能需要的每个位置动态创建css类(是的,我们在浏览器调整大小时重新创建它们),甚至使用这些类避开内联样式,我们也从Safari获得了布局优化

1 个答案:

答案 0 :(得分:0)

显然,溢出隐藏不是可继承的属性,因此我们假设,如果父母这样做,则孩子会拥有它是错误的。

因为在可滚动子元素上根本没有设置溢出属性,所以尝试滚动时失败。

当将溢出隐藏正确地应用于元素时,我们收回了滚动功能,而又不允许用户不希望地滚动。

...也觉得有点傻。