在Wordpress中使用对齐滚动

xqk2d5yq 于 2023-02-03 发布在 WordPress

关注(0)|答案(2)|浏览(163)

我想知道是否有人有幸让snap scrolling在WordPress中工作？我注意到WPD SE上有一个5年的similar question没有得到任何答案。
我正在使用Divi主题。This是我的测试页。
我使用this technique来查找滚动条的所有者，这个元素是body。
所以我尝试了下面的自定义CSS代码...

body {
  scroll-snap-type: y mandatory; 
}

然后，在我想要对齐的子div中，我添加了：

scroll-snap-align: start;

这不起作用，所以我尝试设置scroll-snap-type: y mandatory;代替#page-container，然后设置#et-boc，这是body的两个子元素，也是可视区域的高度，这也不起作用。
我已经成功地让对齐滚动在a CodePen中工作，所以我知道我的代码在理论上是正确的。
有什么想法吗？谢谢！

wordpress

来源：https://stackoverflow.com/questions/63086024/getting-snap-scrolling-to-work-in-wordpress

2条答案

按热度按时间

py49o6xq1#

使用Plus Addons这样的插件也可以实现这个功能，他们称之为全屏滚动。基本上，它定义了作为独立全屏部分工作的部分。使用这些部分时要注意响应速度。

赞(0）回复(0）举报 2023-02-03

cbwuti442#

链接的页面不再工作，你的CodePen与你所描述的不同（类被添加到div而不是body）。但这对我的WordPress安装示例有效：

html {
  overflow: hidden; /* Makes sure there is no scroll bar added for the html element */  
}

body {
  height: 100vh; /* Body as high as viewport */
  scroll-snap-type: y mandatory;
  overflow-y: scroll; /* Add scroll bar for content outside of viewport */
}

.scroll-target, nav { /* Make sure also to add nav and footer to make them reachable by scrolling */
  scroll-snap-align: start;
}

footer {
  scroll-snap-align: end;
}

div.scroll-target {
  height: 200px;
  margin-bottom: 200px;
}

nav {
  margin-bottom: 200px
}

<html>

<body>
  <nav>This is a navigation</nav>
  <div class="scroll-target" style="background-color:red">This is a div</div>
  <div class="scroll-target" style="background-color:green">This is a div</div>
  <div class="scroll-target" style="background-color:yellow">This is a div</div>
  <div class="scroll-target" style="background-color:pink">This is a div</div>
  <footer>This is a </footer>
</body>

</html>

赞(0）回复(0）举报 2023-02-03

我来回答

在Wordpress中使用对齐滚动

2条答案

相关问题

热门标签

最新问答