jQuery Scrollbar

JavaScript
1

I don’t know if this exist bu I am looking for a scroll bar that only should be functioning when the content is exceeding the height of the div

Thank you in advance!

2

Ok so I just added overflow-auto to the parent container. I furthermore added the following webkit-scrollbar properties to my CSS file:


#kaart .listing::-webkit-scrollbar {
    width: 10px;
}

#kaart .listing::-webkit-scrollbar-track {
    background-color: transparant;
}

#kaart .listing::-webkit-scrollbar-thumb {
  height: 2rem;
  background:rgb (80,3,117);
  background:rgba(80,3,117,1);
}

I found a tutorial where the said I could use jquery.jscrollpane as a fallback for other browsers, so I have added jquery.jscrollpane.css and jquery.jscrollpane.min.js to the page and changed the following properties in jquery.jscrollpane.css to my needs:


.jspTrack
{
    background-color: transparant;
    position: relative;
}

.jspDrag
{
   background:rgb (80,3,117);
   background:rgba(80,3,117,1);
    position: relative;
    top: 0;
    left: 0;
}

and added the following Javascript call to the page:


      $(document).ready(function () {
          if (!$.browser.webkit) {
              $('.listing').jScrollPane();
          }
      });

But it doesn’t give me the desired result as you will see on this page after clicking for example on side dishes. On Chrome you can see how I intend to have it. Does anyone see what I am doing wrong or is there maybe another sollution for a custom scrollbar?

Thank you in advance.

3

Morning donboe,

I’m sure I’m missing something, but isn’t that what you currently have on this page?

If you click on “Side Dishes” in the menu, the list of side dishes fills the container on the right and a scroll bar appears (as the content exceeds the height of the containing div).

4

Hi Pullo. Yes you are absolutely right. It is more that I was looking for a customized scrollbar that would behave like that. I tried different plugins but somehow I didn’t get it to work (I think it has to do because the different menu content is loaded true a AJAX call, but I am not sure). So for now I left it with the default scrollbar. I have the same problem back-end with tabs(unfortunately I can’s show you that because, like I said it is back-end. If you know a sollution for the scrollbar I would be more then happy.

5

Hi donboe,

You are correct.
I’ve been experimenting using this plugin and when you load new content into a div using AJAX, you have to reinitialize the plugin.

Demo

The way I got it to work is as follows:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Custom scrollbars</title> 
    <link type="text/css" rel="stylesheet" href="http://jquery-custom-scrollbar.rocketmind.pl/jquery.custom-scrollbar.css"/>
    <style>
      .container {
        width: 200px; 
        height: 200px; 
      }

    </style>
  </head>

  <body>
    <div class="container default-skin">
      <p>Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.</p>
      <p>Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.</p>
    </div>
    <br />
    <div class="container modern-skin" id="ajaxContainer"></div>
    <button type="button">Load content</button>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://jquery-custom-scrollbar.rocketmind.pl/jquery.custom-scrollbar.js"></script>
    <script>
      $(".container").customScrollbar();

      $("button").on("click", function(){
        $.ajax({
          url: "get.php",
          success: function(res){
            $("#ajaxContainer").html(res).customScrollbar();
          }
        });
      })
    </script>
  </body>
</html>

get.php

<?php 
echo "<p>Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.</p>
      <p>Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.</p>";
?>

HTH

6

Hi Pullo. I just tried this in a test page and it is working great! I am going to implement this in the pages later on. Thank you so much