Disable scripts in editor

Publishing help Editor
1

Hello,

I have the library locomotive scroll in my project and it’s preventing me from scrolling in the editor because of the stylesheet that is included in the Locomotive script. In that stylesheet, there is an overflow: hidden to the html.
Would there be a way to prevent the script from loading in the editor or any js script? Or, would there be a way to override the locomotive scroll stylesheet? I tried to do it in the head code with some css but it doesn’t work

I hope someone will be able to help me.

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Lounes_Ziani

When executing your script, wrap it as follows:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
     if(!Webflow.env('editor')) {
        // run your script here
     }
  }
</script>
2 Likes
3

Hey Alex!

Thank you for your response. I actually tried this solution without success.
Should I include in the sources of the scripts?
Here’s how I did it:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  if (!Webflow.env('editor')) {
    gsap.registerPlugin(ScrollTrigger);

var locomotive = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
multiplier: 1.0,
getDirection: true,
});

locomotive.on("scroll", () => {
ScrollTrigger.update();
});

ScrollTrigger.scrollerProxy("[data-scroll-container]", {
scrollTop(value) {
return arguments.length
? locomotive.scrollTo(value, 0, 0)
: locomotive.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
};
},
pinType: document.querySelector("[data-scroll-container]").style.transform
? "transform"
: "fixed",
});

ScrollTrigger.defaults({
scroller: "[data-scroll-container]",
});

ScrollTrigger.addEventListener("refresh", () => locomotive.update());
ScrollTrigger.refresh();
  }
});
</script>
4

Mind sharing a read only link to your project as well as the webflow.io published site?

5

Hey!

Yessir, here you go:
https://preview.webflow.com/preview/gestacom-sarl?utm_medium=preview_link&utm_source=dashboard&utm_content=gestacom-sarl&preview=0571d4f51dfc86d5a0813fcc91907a2f&workflow=preview

https://gestacom-sarl.webflow.io/

The weirdest thing is that I have the same code for the locoscroll script on my own portfolio site and the editor mode doesn’t load the script and I get to scroll in the editor. It’s really weird.

Thanks for you help man!

6

All my custom code is in the project code.

Tell me if you need to take a look at it as well.

Thank you!

7

Currently, it looks like only one part of the script is being disabled.

In my experience, you’ll generally want to disable all custom code functions just to avoid any conflicts in the editor.

Try wrapping all code being executed in the following <script> blocks as well:

  • // FIX RESIZE ON MOBILE ---------------------------------------------
  • // ---------------------------- TRANSITION ---------------------------- //
  • //LOCOMOTIVE SCROLL AND GSAP //

If that still fails, try checking for the WebflowEditor object in the Window as follows:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
     if(!window.WebflowEditor) {
        // run your script here
     }
  }
</script>
8

Thanks again for your reply.

I tried both and it still fails. Should I include this too in the function?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>

Thank you!

9

My solution was to end up using Lenis Smooth Scroll library which allows me to use the editor as well. Locomotive scroll seems to not work at all with the editor.

Thank you Alex for all your help and your time!