Build a Google-like scroll-to-unlock button for your MyBB privacy policy

11 Aug 2018 Edited
EU's GDPR forced the whole websites world to update privacy policies and let us – the users – decide how our data is stored and used by the Big Brother universe we are used to live in. If you are a forum manager you may already have heard of Amnesia, an extension born to make MyBB forums compliant to EU's regulations; that's what MyBBoost is running at the moment.

Some of you asked me how to replicate that scroll-to-unlock design you can see the very first time you register here on MyBBoost; not only to ensure their users have read the whole policy, but also to add a bit of interactivity and style to their policies. This tutorial is meant to answer the question. The final result:

[Image: auBsVku.gif]

At the end of the day, simplicity is what cares the most. And to achieve such effect is very easy indeed. Here's the JS script I have built: you can add it at the end of the help document you are using with Amnesia, and voilà. You are done.

<script type="text/javascript">
$(document).ready(function() {
    var button = $('#accept');
    button.attr('disabled', true).val('Unlock by scrolling to the bottom');
    $('#policyContainer').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() + 40 >= $(this)[0].scrollHeight) {
            button.removeAttr('disabled').val('Accept and continue');
Let's break that down to the crucial pieces you'll most likely need to adapt to your theme in order to make it work.

var button = $('#accept');
This is the target button which will change its state when scrolled down to the bottom of the page or DOM element. Either you change it to your actual button's id, or you change the button id to #accept. You decide.

Unsurprisingly, you will need to set up a scrolling listener and attach it to either the whole document or an element. I have decided to create my own scrollable container to let the button be always visible to the user, so they will actually see the button changing color and text as soon as they reach the end of the container; but you can also attach that to $(document) if you want to change the button's appearance when the whole page is scrolled down.

$(this).scrollTop() + $(this).innerHeight() + 40 >= $(this)[0].scrollHeight
Finally, this is the condition which will detect when the end of the document/element will be reached. 40 is a "safe margin" option I have added to change the button state when the user has scrolled down to the end minus 40 pixels from the real end – because users might not actually reach the true end of the container or page. You can tweak it to an higher or lower number depending on your needs.
Tamil Selvan and phpkiller like this post
Tamil Selvan 27 Mar 2019
sir actually how to add this & in which file have to add this code
Shade 27 Mar 2019
Hello, please read the post carefully. Everything is written there.