Scroll to bottom to Enable Terms and Conditions Checkbox in Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil September 24, 2022


You must have seen those I accept terms and conditions checkbox. Above it there will be a long paragraph of T&C.

Most of the times users are not going to read through that T&C paragraph and just hit the I accept T&C checkbox directly. Later on designers came up with an idea which will force user to read through the terms & conditions and then hit the accept checkbox.

The idea was to keep that checkbox disabled by default and make it enable once user scroll through Terms and Conditions paragraph and the scroll reaches to its bottom. 

In below example I have created a similar functionality in my Lightning Web Component using event listeners.

Please check the code below:


ScrollToEnable.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<template>
  <div class="slds-box slds-theme_default">
    <lightning-card title="Terms &amp; Conditions">
      <div data-id="containerDiv" class="container slds-p-around_small">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo
          enim, lacinia commodo sodales id, auctor non dolor. Aenean ut
          malesuada arcu. Vestibulum urna magna, malesuada in magna eu,
          sollicitudin cursus ipsum. Cras aliquam dictum ligula, nec dictum odio
          maximus ut. Donec et lectus eu magna iaculis bibendum. Nam eu suscipit
          mi, eu iaculis leo. Quisque dictum tincidunt nisl, vitae dignissim
          arcu vulputate non. Maecenas sagittis justo non scelerisque sodales.
          Nunc ut lorem porta, vestibulum odio quis, aliquet massa.
          <br />
          Pellentesque nec molestie lectus. Mauris in iaculis tellus. Curabitur
          mi mi, lobortis eget risus id, viverra vehicula neque. Mauris vel nisi
          sagittis, maximus dolor non, tempor orci. Vivamus maximus aliquet ex
          in porttitor. Duis egestas, libero non viverra congue, erat ipsum
          vulputate velit, in vestibulum lacus metus quis tortor. Aenean quis
          pharetra arcu. Donec eu sapien lacus. Quisque vitae orci ut nulla
          commodo eleifend. Pellentesque eget tellus rhoncus, pretium sapien sit
          amet, posuere justo. Donec laoreet nulla nulla, ut pharetra ipsum
          tincidunt vel. Aliquam porttitor urna vel mauris dictum, et molestie
          risus malesuada. Aenean auctor dui velit, vel luctus elit aliquam et.
          Cras ligula tortor, accumsan id tellus sit amet, tristique fringilla
          turpis. Integer sed eleifend ante, nec semper dui.
          <br />
          Nam quis ipsum ac metus posuere cursus. Nulla porta semper lorem vitae
          venenatis. Nunc cursus tincidunt congue. Orci varius natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus. Aenean
          maximus scelerisque magna sit amet pharetra. Sed non imperdiet dui.
          Nam eu tortor vulputate, venenatis nunc id, mattis neque. Suspendisse
          mattis lacus eu nunc faucibus, vitae vulputate metus iaculis. Aenean
          fermentum rutrum ipsum, eget commodo enim ullamcorper sit amet.
          <br />
          Praesent dictum accumsan massa, non sollicitudin elit laoreet sed.
          Morbi in odio turpis. Praesent ac imperdiet justo. Mauris tincidunt
          ultrices enim. Nulla facilisi. Vestibulum hendrerit, felis a consequat
          pretium, dolor risus tristique mauris, vitae consequat orci nibh
          sagittis sapien. In hac habitasse platea dictumst. Aenean molestie
          dolor ligula, quis porta lectus suscipit vel.
          <br />
          Vestibulum malesuada pulvinar interdum. Praesent accumsan velit leo,
          eu vestibulum justo lacinia eget. Sed sit amet tempor sapien.
          Suspendisse potenti. Pellentesque habitant morbi tristique senectus et
          netus et malesuada fames ac turpis egestas. Nam venenatis tincidunt
          neque quis luctus. Nunc dictum est eu augue cursus, in convallis lorem
          aliquam. Phasellus at nisl cursus, mollis mi non, sagittis dolor.
          <br />
          Pellentesque nec molestie lectus. Mauris in iaculis tellus. Curabitur
          mi mi, lobortis eget risus id, viverra vehicula neque. Mauris vel nisi
          sagittis, maximus dolor non, tempor orci. Vivamus maximus aliquet ex
          in porttitor. Duis egestas, libero non viverra congue, erat ipsum
          vulputate velit, in vestibulum lacus metus quis tortor. Aenean quis
          pharetra arcu. Donec eu sapien lacus. Quisque vitae orci ut nulla
          commodo eleifend. Pellentesque eget tellus rhoncus, pretium sapien sit
          amet, posuere justo. Donec laoreet nulla nulla, ut pharetra ipsum
          tincidunt vel. Aliquam porttitor urna vel mauris dictum, et molestie
          risus malesuada. Aenean auctor dui velit, vel luctus elit aliquam et.
          Cras ligula tortor, accumsan id tellus sit amet, tristique fringilla
          turpis. Integer sed eleifend ante, nec semper dui.
          <br />
          Nam quis ipsum ac metus posuere cursus. Nulla porta semper lorem vitae
          venenatis. Nunc cursus tincidunt congue. Orci varius natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus. Aenean
          maximus scelerisque magna sit amet pharetra. Sed non imperdiet dui.
          Nam eu tortor vulputate, venenatis nunc id, mattis neque. Suspendisse
          mattis lacus eu nunc faucibus, vitae vulputate metus iaculis. Aenean
          fermentum rutrum ipsum, eget commodo enim ullamcorper sit amet.
          <br />
          Praesent dictum accumsan massa, non sollicitudin elit laoreet sed.
          Morbi in odio turpis. Praesent ac imperdiet justo. Mauris tincidunt
          ultrices enim. Nulla facilisi. Vestibulum hendrerit, felis a consequat
          pretium, dolor risus tristique mauris, vitae consequat orci nibh
          sagittis sapien. In hac habitasse platea dictumst. Aenean molestie
          dolor ligula, quis porta lectus suscipit vel.
          <br />
          Vestibulum malesuada pulvinar interdum. Praesent accumsan velit leo,
          eu vestibulum justo lacinia eget. Sed sit amet tempor sapien.
          Suspendisse potenti. Pellentesque habitant morbi tristique senectus et
          netus et malesuada fames ac turpis egestas. Nam venenatis tincidunt
          neque quis luctus. Nunc dictum est eu augue cursus, in convallis lorem
          aliquam. Phasellus at nisl cursus, mollis mi non, sagittis dolor.
        </p>
      </div>
    </lightning-card>
    <br />
    <lightning-input
      type="checkbox"
      label="I accept Terms &amp; Conditions!"
      name="input"
      disabled={isDisabled}
    ></lightning-input>
  </div>
</template>


ScrollToEnable.js

Note : Scroll behaviour depends on browser width. Object.clientHeight is going to be same each time but with different browser width i.e 80%-125% the scrollHeight and scrollTop value will be different and might now return the accurate value.
That's why in below JS I have calculated a max & min value in scroll to adjust it according to browser width.
In this example I have added a gap of 5 pixels in the scroll value which is sufficient enough in my opinion.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { LightningElement } from "lwc";

export default class ScrollToEnable extends LightningElement {
  isDisabled = true;

  renderedCallback() {
    this.template
      .querySelector('[data-id="containerDiv"]')
      .addEventListener("scroll", this.myFunction);
  }
  disconnectedCallback() {
    this.template
      .querySelector('[data-id="containerDiv"]')
      .removeEventListener("scroll", this.myFunction);
  }
  myFunction = () => {
    let divObj = this.template.querySelector('[data-id="containerDiv"]');
    let clientScrollMinValue = divObj.scrollTop - 5;
    let clientScrollMaxValue = divObj.scrollTop + 5;
    let targetValue = divObj.scrollHeight - divObj.clientHeight;
    if (
      targetValue >= clientScrollMinValue &&
      targetValue <= clientScrollMaxValue
    ) {
      this.isDisabled = false;
    }
  };
}


ScrollToEnable.css

1
2
3
4
.container {
  height: 350px;
  overflow-y: scroll;
}


Output



Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

3 Comments

  1. SudiptaSeptember 26, 2022 at 3:37 AM

    Check Box is not enabling after copying this code in my dev.

    ReplyDelete
    Replies
    1. SudiptaSeptember 26, 2022 at 3:44 AM

      This functionality in Chrome is only working when I am making zoom size less than 100. For 100 percent zoom size in the chrome browser it is not working.Any idea why?

      Delete
    2. KapilSeptember 26, 2022 at 4:39 AM

      Thanks for pointing it out. I was not aware about it that the behaviour is going to be changed based on the zoom%. I have updated above code snippet and added a note also there.

      Delete