这几乎是个问题。我在网上到处搜索,但找不到css的任何实现用纯javascript编写的scroll-snap-stop: always
。
我不想使用css属性,因为不是所有的浏览器都尊重它(更不用说旧的浏览器了(。
有人有做类似事情的示例代码吗?我不知道从哪里看,也不知道如何开始。
这是我在这里工作的一个例子https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
它迫使用户在的每个部分停止
[EDIT]-我基本上想要scroll-snap-stop: always
在不使用它的情况下所做的功能。不应该有css,只有模仿相同css行为的纯javascript。
我需要纯javascript而不是css,因为并非所有浏览器都使用scroll-snap-stop: always
css属性。所以我想编写一个javascript替代方案来做同样的事情。
- 在JS中进行模式切换,甚至可以使用纯HTML按钮
- 在CSS中创建样式
使用JavaScript更改元素的类。并使用CSS为这两个类设置样式。
此方法与样式无关。
假设您有一个溢出的项目列表(ul是溢出的容器(:
- ul
- li
- 李
- 李
加载页面时,将所有列表项都设置为不显示,前两项除外。您将第二个设置为1px宽度,并将第一个设置为其正常宽度。当第二个进入视口(交叉点观察者(时,将第二个展开到其法线宽度。然后,您还将第三个设置为1px宽度,并将其设置为显示块。当第一个离开视口(交叉点观察者(时,您将该视口的宽度设置为1px。。。等等。这应该模仿CSS规则。
你可以编码这个。。。它会表现得非常棒。。。但我不会这么做。"滚动快照停止:始终"的浏览器兼容性很好:https://caniuse.com/?search=scroll%20snap