Elementor 创建左右容器同步相反滚动网页：打造动态用户体验

使用 Elementor 创建左右容器同步相反滚动网页

作为程序员和技术作家，我将分享如何使用 Elementor 创建具有左右容器和同步相反滚动的网页。此技术为网站设计增添了动态感和引人入胜的用户体验。

设置容器

1. 创建一个全宽、100vh 高度的主容器。
2. 添加两个宽度为 50% 的内部容器，分别命名为“左”和“右”。
3. 在“左”和“右”容器内，添加高度为 800px 的另一个内部容器。

添加内容

4. 在内部容器中添加文本、图像或其他元素。

实现相反滚动

5. 在 Elementor 设置中，添加以下 CSS：

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
.containerAll {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
.left, .right {
    flex: 1;
    overflow-y: scroll;
    height: 100%;
  }
   .content {
    height: 800px; /* Adjust the height as per your content */
  }

6. 添加以下 JavaScript：

const leftContainer = document.querySelector('.left');
const rightContainer = document.querySelector('.right');
leftContainer.scrollTop = leftContainer.scrollHeight - leftContainer.clientHeight;
rightContainer.scrollTop = 0;
leftContainer.addEventListener('scroll', function() {
  rightContainer.scrollTop = this.scrollHeight - this.clientHeight - this.scrollTop;
});
rightContainer.addEventListener('scroll', function() {
  leftContainer.scrollTop = this.scrollHeight - this.clientHeight - this.scrollTop;
});

解决常见问题

不同步滚动：

• 检查 CSS 和 JavaScript 代码是否正确。
• 使用正确的类名和选择器。

大屏幕不工作：

• 调整内部容器的高度或 CSS 中的 flex 属性。

滚动反向：

• 交换 JavaScript 代码中 leftContainer 和 rightContainer 的位置。

结论

通过遵循这些步骤，你可以创建一个具有左右容器和同步相反滚动的响应式网页。不断完善和调整以满足你的需求。

常见问题解答

1. 为什么我的滚动不是同步的？
   • 检查 CSS 和 JavaScript 代码是否存在错误。
2. 为什么滚动方向与预期相反？
   • 交换 JavaScript 代码中 leftContainer 和 rightContainer 的位置。
3. 如何调整滚动速度？
   • 修改 CSS 中容器的高度。
4. 我可以禁用移动设备上的相反滚动吗？
   • 使用 CSS 媒体查询检测设备类型并禁用滚动。
5. 如何添加更多容器？
   • 使用 flexbox 或网格布局，并相应调整 JavaScript 代码。