# Is locomotive scroll possible?

**URL:** <https://forum.readymag.com/t/is-locomotive-scroll-possible/2814>\
**Category:** Custom code\
**Created:** [April 19, 2024, 10:37pm UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814 "2024-04-19T22:37:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![axel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/axel/32/2174_2.png) [@axel](https://forum.readymag.com/u/axel)\
**Post date:** [April 19, 2024, 10:37pm UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/1 "2024-04-19T22:37:52Z")

</div>

Curious if this is possible to implement in readymag? My understanding is that it needs to be defined by sections/ anchors but im not sure this is feasible. Would love any sort of smooth scrolling to feel like this site. New to front end customizations btw, thanks!

[PROJECTS | ADRIAN WILHELM –&nbsp;DESIGN PORTFOLIO](https://adrian-wilhelm.de/projects)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 20, 2024, 1:59pm UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/2 "2024-04-20T13:59:30Z")

</div>

this works. but regarding the page alignment you choose you have to find ot which container is being scrolled. ist not the body though. If i remember, look for something like “.content-scroll-wrapper” int he devtools.

> <https://github.com/mudin/magic-scroll/blob/master/README.md>

---

<div class="post-metadata">

**Author:** ![axel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/axel/32/2174_2.png) [@axel](https://forum.readymag.com/u/axel)\
**Post date:** [April 21, 2024, 12:08am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/3 "2024-04-21T00:08:35Z")

</div>

thanks! I found these classes in Dev tools along with the corresponding css styles, does it need to be the full .mag.mag-pages class or will targeting content scroll wrapper suffice? I tried both didnt see a difference, code used below. Thanks in advance!

ps I like your site! did you build that on readymag?

.mag .mag-pages-container .container .page .content-scroll-wrapper {  
position: absolute;  
top: 0;  
left: 0;  
width: 100%;  
height: 100%;  
overflow-x: hidden;  
overflow-y: auto;  
}

```auto
<!-- Include MagicScroll script -->
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>

<!-- Style for smooth scrolling -->
<style>
  /* Targeting the specified element */
  .content-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

<!-- Initialize MagicScroll -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize MagicScroll with target element and settings
    let magicScroll = new MagicScroll({
      target: document.querySelector('.content-scroll-wrapper'), // Targeting the specified element
      speed: 160, // Adjust speed as needed
      smooth: 24 // Adjust smoothness as needed
    });

    // Set up MagicScroll onUpdate event
    magicScroll.onUpdate = a => {
      console.log(a);
    };
  });
</script>

```

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 22, 2024, 8:43am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/4 "2024-04-22T08:43:02Z")

</div>

hey,  
you don´t need the extre section.  
And erase the “**document.addEventListener(‘DOMContentLoaded’, function() {**”  
don´t forget to also delecte the last bracket.

(the domcontentloaded function isnt triggering with RM, so the code isn´t executed)

And it does not need the full classname selector.!

And yeah, my website is build with RM, but there is pretty much customcode in it.

---

<div class="post-metadata">

**Author:** ![axel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/axel/32/2174_2.png) [@axel](https://forum.readymag.com/u/axel)\
**Post date:** [April 23, 2024, 1:42am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/5 "2024-04-23T01:42:27Z")

</div>

Spent some time troubleshooting and ended up publishing site. Couldn’t tell if RM preview might have been impeding effect preview. Below is updated code that i believe is still not working. (im scrolled out lol) I checked networks in devtools and confirmed 200 code to ensure proper connection. I also tried targeting the subsequent classes but i didnt see a difference. Promise this will be the last round on this before calling it off. I really appreciate your time and help.

Live Site: [https://axelcastillo.com/](https://axelcastillo.com/)  
Classes Tried:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/c/c67297f4ad97b82dfcec9b1c6699d67b9841dcb5.png)

Live Code:

```auto
<!-- Include MagicScroll script -->
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>

<!-- Style for smooth scrolling -->
<style>
  /* Targeting the specified element */
  .content-scroll-wrapper.has-vertical-scroll.accelerated-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

<!-- Initialize MagicScroll -->
<script>
  // Initialize MagicScroll with target element and settings
  let magicScroll = new MagicScroll({
    target: document.querySelector('.content-scroll-wrapper.has-vertical-scroll.accelerated-scroll'), // Targeting the specified element
    speed: 20, // Adjust speed as needed
    smooth: 60 // Adjust smoothness as needed
  });

  // Set up MagicScroll onUpdate event
  magicScroll.onUpdate = a => {
    console.log(a);
  };
</script>

```

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 23, 2024, 7:28am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/6 "2024-04-23T07:28:12Z")

</div>

don´t give up… 😉

here is the solution, I just changed the let to var and added a Timeout to make sure the class is already selectable by js:

```auto
<script src="https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js"></script>
<script>
 setTimeout(function() {
var magicScroll = new MagicScroll({
    target: document.querySelector(".content-scroll-wrapper"), // Targeting the specified element
    speed: 165, // Adjust speed as needed
    smooth: 25 // Adjust smoothness as needed
  });

  // Set up MagicScroll onUpdate event
  magicScroll.onUpdate = a => {
    console.log(a);
  };
}, 1000);
</script>

```

nice website though!

---

<div class="post-metadata">

**Author:** ![axel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/axel/32/2174_2.png) [@axel](https://forum.readymag.com/u/axel)\
**Post date:** [April 23, 2024, 8:55pm UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/7 "2024-04-23T20:55:47Z")

</div>

Thanks! I’m excited to see this version of my portfolio come to live. Took me a minute to get the hang of RM.

Also those edits worked! Thanks! The script is finally running and I’m seeing the effects. There’s this odd slingshot effect/auto scroll happening though, both in chrome/safari(worse). I toyed around with settings currently set to speed:10 smooth:60 thinking that might have been the cause. Wondering if it’s fighting with browser native settings. Debugger is highlighting this part of the code as leading to webgl issues.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/8/8220acf18669fd5bcbb1ac12b1fc9ea161543c93.png)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 24, 2024, 8:05am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/8 "2024-04-24T08:05:00Z")

</div>

hey, the settings are a bit wierd, or hard to understand.  
Its a pretty lightweight selfmade script, so yeah, use it with caution. I also don´t know if this works good on mobile. So maybe add a exception for mobile…  
But then there is the question if those hackarounds make it worth to use it.

---

<div class="post-metadata">

**Author:** ![Maria\_Gonzalez](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/maria_gonzalez/32/2488_2.png) [@Maria\_Gonzalez](https://forum.readymag.com/u/Maria_Gonzalez)\
**Post date:** [October 21, 2024, 9:58am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/9 "2024-10-21T09:58:08Z")

</div>

Hi Axel, I took a look at your wesite, it is super cool! One question: how did you manage to get the blend mode on the cursor? I have tried some code I have seen on the forum but didn’t work. Thanks!

---

<div class="post-metadata">

**Author:** ![axel](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/axel/32/2174_2.png) [@axel](https://forum.readymag.com/u/axel)\
**Post date:** [October 22, 2024, 2:11am UTC](https://forum.readymag.com/t/is-locomotive-scroll-possible/2814/10 "2024-10-22T02:11:57Z")

</div>

Hi Maria!

The code below is what I used for my site. Let me preface with saying this took a lot of trial and error so I may not be of much help post sharing lol. My knowledge with code is limited, so please use with caution. Good luck!

```auto
<!-- Custom Cursor -->

<div class="cursor">
</div> <!-- Custom cursor element -->

<style>
  body {
    cursor: none; /* Hide the default cursor */
  }

  a {
    cursor: none !important; /* Override cursor style for links */
  }

  .cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: difference; /* Optional */
  }

  @media (max-width: 768px) {
    .cursor {
      display: none;
    } /* Hide custom cursor on mobile */
  }
</style>`

```