Is it possible to display the scrollbar in a different style?

  • milladesignmaccom
    Asked on May 1, 2016 at 4:31 PM
    is it possible to get the scrollbarjust to scroll vertical, and in a wider and different style type than the page scroll, so the user dont get confused?
  • Welvin Support Team Lead
    Replied on May 1, 2016 at 6:32 PM

    To remove the scrollbar at the bottom, add the following custom CSS codes to your form:

    .jotform-form {

    overflow-x: hidden;

    }

     

    To style the scrollbar of the form, generator the codes in the below website and copy/paste the generated codes to the custom CSS area of the form.

    http://mikethedj4.github.io/Webkit-Scrollbar-Generator/

    Simply remove the following lines in the generated CSS:

    <style type="text/css"> and the </style>

    Example:

    ::-webkit-scrollbar {

      width: 10px;

      height: 10px;

    }

    ::-webkit-scrollbar-button {

      width: 0px;

      height: 0px;

    }

    ::-webkit-scrollbar-thumb {

      background: #008000;

      border: 0px none #ffffff;

      border-radius: 0px;

    }

    ::-webkit-scrollbar-thumb:hover {

      background: #008040;

    }

    ::-webkit-scrollbar-thumb:active {

      background: #004000;

    }

    ::-webkit-scrollbar-track {

      background: #ff0080;

      border: 16px solid #8000ff;

      border-radius: 50px;

    }

    ::-webkit-scrollbar-track:hover {

      background: #666666;

    }

    ::-webkit-scrollbar-track:active {

      background: #333333;

    }

    ::-webkit-scrollbar-corner {

      background: transparent;

    }

     

    Note, this will only work for Chrome. You won't see this on a non-webkit browser such as Firefox. 

     

    Here's an example: https://form.jotform.com/61217199111955.