Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Custom Scrollbar Jquery

Custom Scrollbar Jquery

Scheduled Pinned Locked Moved General Discussion
12 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • dafvD Offline
    dafvD Offline
    dafv
    wrote on last edited by
    #1

    Hey @arminunruh!

    I'm trying to customize my scrollbar with jquery, but with no results :/
    Could you help me pleeeease?

    1 Reply Last reply
    0
    • dafvD Offline
      dafvD Offline
      dafv
      wrote on last edited by
      #2

      or...can you help me @mariusjopen? I'd really appreciate it!

      1 Reply Last reply
      0
      • mariusjopenM Offline
        mariusjopenM Offline
        mariusjopen
        Global Moderator
        wrote on last edited by
        #3

        Hi @danielfvmartins

        it is a bit difficult to help if we don't see your website.

        What exactly is the problem?

        Do you have the code ready and you cannot implement it?

        Have a look here:
        http://laytheme.com/documentation.html#custom-javascript

        Let me know how I can help!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • dafvD Offline
          dafvD Offline
          dafv
          wrote on last edited by
          #4

          So, basically i did some webkit scrollbar changes to the website but they don't seem to be compatible with Safari and Firefox.

          I'm trying to implement basic Nicescroll jQuery Plugin just to see if everything is working nicely, but when i try to customize colors and stuff it doesn't seem to be working....

          In summary, i just want to replicate the webkit scrollbar changes i've made on the additional CSS but with JS.

          I'm gonna send you the website login info for your chat :)

          1 Reply Last reply
          0
          • mariusjopenM Offline
            mariusjopenM Offline
            mariusjopen
            Global Moderator
            wrote on last edited by
            #5

            Hi Daniel,

            I got your chat message and had a look into your page.

            Actually you cannot use this:

            
            <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
            <script src="http://www.daniel-martins.com/wp-content/uploads/2017/10/jquery.nicescroll.min_.js"></script>
            
            <script>
              $(document).ready(function() {
            	var nice = $("html").niceScroll();  // The document page (body)
              });
            </script>
            
            1. jQuery is already installed. It will confuse if you have 2 jQuerys active.
            2. You cannot use document ready. Have a look here:
              http://laytheme.com/documentation.html#custom-javascript

            Let me know if you get further or have a specific question. I cannot code the custom scrollbar for you. But I am happy to assist.

            Best!

            Marius

            www.mariusjopen.world

            dafvD 1 Reply Last reply
            0
            • mariusjopenM mariusjopen

              Hi Daniel,

              I got your chat message and had a look into your page.

              Actually you cannot use this:

              
              <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
              <script src="http://www.daniel-martins.com/wp-content/uploads/2017/10/jquery.nicescroll.min_.js"></script>
              
              <script>
                $(document).ready(function() {
              	var nice = $("html").niceScroll();  // The document page (body)
                });
              </script>
              
              1. jQuery is already installed. It will confuse if you have 2 jQuerys active.
              2. You cannot use document ready. Have a look here:
                http://laytheme.com/documentation.html#custom-javascript

              Let me know if you get further or have a specific question. I cannot code the custom scrollbar for you. But I am happy to assist.

              Best!

              Marius

              dafvD Offline
              dafvD Offline
              dafv
              wrote on last edited by
              #6

              Thank you @mariusjopen

              I changed the code and it worked!
              But it still has some minor bugs...

              The scrollbar now appears behind the content and, when the cursor is on top of a video it's not possible to scroll the site.

              Can you give some hints on how to solve this please?

              dafvD 1 Reply Last reply
              0
              • dafvD dafv

                Thank you @mariusjopen

                I changed the code and it worked!
                But it still has some minor bugs...

                The scrollbar now appears behind the content and, when the cursor is on top of a video it's not possible to scroll the site.

                Can you give some hints on how to solve this please?

                dafvD Offline
                dafvD Offline
                dafv
                wrote on last edited by
                #7

                @mariusjopen i managed to change the z-index

                But i still would appreciate your help with those two bugs!

                • when the cursor is on top of a video it's not possible to scroll the site
                • the scroll on the website it's a bit delayed and 'draggy'
                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  Hi @danielfvmartins ,

                  exactly! The z-index is the way to go.

                  To help you now – I really should have a look on the website.

                  Can you upload it?

                  All the best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply
                  0
                  • dafvD Offline
                    dafvD Offline
                    dafv
                    wrote on last edited by
                    #9

                    Sure @mariusjopen

                    I sent you again all the access info by chat :)

                    Thank you!
                    Best

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      Hi @danielfvmartins
                      Ok i see the problem.

                      The jQuery is active when you scroll on the BODY of the website.

                      When you embed a video with Vimeo its gets embedded with an iframe.

                      An iframe has its own body and therefore you code does not get activated.

                      Is it an option to embed the video via MP4 and just upload them?

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      • dafvD Offline
                        dafvD Offline
                        dafv
                        wrote on last edited by
                        #11

                        Hey @mariusjopen
                        I thought about that but I don't think it would be an option. Any ideas to work this out?

                        And what about the lag and delay of the scroll, why is this happening? :(

                        Best
                        Daniel

                        1 Reply Last reply
                        0
                        • mariusjopenM Offline
                          mariusjopenM Offline
                          mariusjopen
                          Global Moderator
                          wrote on last edited by
                          #12

                          Hi Daniel,

                          this is because it runs all with Javascript and it needs to run a loop the whole time.

                          I personally would not got for the customized scroll bar.

                          Especially since the iframes cause trouble as well.

                          Best!

                          Marius

                          www.mariusjopen.world

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          I also code custom websites or custom Lay features.
                          šŸ’æ Email me here: šŸ’æ
                          info@laytheme.com

                          Before you post:
                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                          2. Update Lay Theme and all Lay Theme Addons
                          3. Disable all Plugins
                          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                          This often solves issues you might run into

                          When you post:
                          1. Post a link to where the problem is
                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                          Online Users
                          arminunruhA
                          arminunruh
                          F
                          francesco
                          L
                          lurchifon
                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                          laytheme.com
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Search