To fix the issue with two scrollbars and scrolling on the page beneath instead of the overlay in Webflow when using the "projects overlay" feature, you can follow these steps:
1. Make sure you are using a proper structure for the overlay section. The overlay section should be a child element of the body element, so it covers the entire page. You can achieve this by setting the overlay section's position to fixed and giving it a width and height of 100%.
2. Next, you need to disable scrolling on the body when the overlay is active. You can achieve this by adding custom code to the page settings or using Webflow's built-in interactions. If you prefer custom code, you can use the following JavaScript code:
```javascript
var body = document.querySelector('body');
var overlay = document.querySelector('.overlay');
function disableScroll() {
body.style.overflow = 'hidden';
}
function enableScroll() {
body.style.overflow = '';
}
overlay.addEventListener('click', enableScroll); // Enable scrolling when overlay is clicked
// Add the following code to the interactions or custom code tab
$('.open-overlay-button').click(function() {
disableScroll();
});
$('.close-overlay-button').click(function() {
enableScroll();
});
```
Replace `.overlay` with the class or ID of your overlay section, and `.open-overlay-button` and `.close-overlay-button` with the classes or IDs of the elements that open and close the overlay.
3. To resolve the problem of the horizontal scroll getting stuck on the live page, you can check if any of your elements are causing overflow. It's possible that an element is extending beyond the page's width, creating the horizontal scroll. You can use Webflow's interface to adjust the size and position of the elements. Make sure they are within the boundaries of the page.
4. If you are experiencing laggy vertical scrolling in the preview mode, this may be related to the issue with the horizontal scroll. Ensure that all elements on the page are properly optimized and not causing any performance issues. Check for large or complex elements that could be affecting the scrolling experience. You can optimize images, simplify interactions, and remove unnecessary code to improve performance.
By following these steps, you should be able to fix the issue with two scrollbars, scrolling on the page beneath the overlay, the horizontal scroll getting stuck, and potentially improve the laggy vertical scroll in the preview mode.