I have this scroll-able frame (frame inside canvas actually).

    import Tkinter as tk
    class Scrollbarframe():
        def __init__(self, parent,xsize,ysize,xcod,ycod):
            def ScrollAll(event):
                    canvas1.configure(scrollregion=canvas1.bbox(&quot;all&quot;),width=xsize,height=ysize,bg=&#39;white&#39;)
            self.parent=parent
            self.frame1=tk.Frame(parent,bg=&#39;white&#39;)
            self.frame1.place(x=xcod,y=ycod)
            canvas1=tk.Canvas(self.frame1)
            self.frame2=tk.Frame(canvas1,bg=&#39;white&#39;,relief=&#39;groove&#39;,bd=1,width=1230,height=430)
            scrollbar1=tk.Scrollbar(self.frame1,orient=&quot;vertical&quot;,command=canvas1.yview)
            canvas1.configure(yscrollcommand=scrollbar1.set)
            scrollbar1.pack(side=&quot;right&quot;,fill=&quot;y&quot;)
            canvas1.pack(side=&quot;left&quot;)
            canvas1.create_window((0,0),window=self.frame2,anchor=&#39;nw&#39;)
            self.frame2.bind(&quot;&lt;Configure&gt;&quot;,ScrollAll)

 
I would like to bind mouse wheel to the scrollbar so that user can scroll down the frame without having to use arrow buttons on the scrollbar. After looking around, i added a binding to my `canvas1` like this

    self.frame1.bind(&quot;&lt;MouseWheel&gt;&quot;, self.OnMouseWheel)

This is the function:

    def OnMouseWheel(self,event):
        self.scrollbar1.yview(&quot;scroll&quot;,event.delta,&quot;units&quot;)
        return &quot;break&quot; 

But the scroll bar won&#39;t move when i use mousewheel. Can anyone help me with this? All i want is when the user use mousewheel (inside the frame area/on the scrollbar), the canvas should automatically scroll up or down.

tkinter: binding mousewheel to scrollbar

Possibly a simple one!

Does anyone know how to get the scroll bar of a UIScrollView to constantly show?

It displays when the user is scrolling, so they can see what position of the scroll view they are in. 

BUT I would like it to constantly show because it is not immediately obvious to the user that scrolling is available

Any advice would be highly appreciated.

UIScrollView - showing the scroll bar

Is it possible to check the `overflow:auto` of a div?


*For example:*

**HTML**

    &lt;div id=&quot;my_div&quot; style=&quot;width: 100px; height:100px; overflow:auto;&quot; class=&quot;my_class&quot;&gt; 
      * content
    &lt;/div&gt;

**JQUERY**

    $(&#39;.my_class&#39;).live(&#39;hover&#39;, function (event)
    {
        if (event.type == &#39;mouseenter&#39;)
        {
             if( ...  if scrollbar visible ? ... )
             {
                alert(&#39;true&#39;):
             }
             else
             {
                alert(&#39;false&#39;):
             }
        }
    
    });


Sometimes is the content short (no scrollbar) and sometimes long (scrollbar visible).

How can I check if a scrollbar is visible?

How can I style webkit scrollbars with CSS3?

I mean these properties:
```css
::-webkit-scrollbar {
    width: 12px;
}
                    
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
                    
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
```

Here is my div tag:
```html
&lt;div class=&quot;scroll&quot;&gt;&lt;/div&gt;
```

Here is my current CSS:
```css
.scroll {
    width: 200px; height: 400px;
    overflow: hidden;
}    
```

CSS3 scrollbar styling on a div

I want to hide any scrollbars from my `div` elements and my whole `body`, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

I have an `iframe` on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).

I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.

On Firefox and IE this works great, there is no scrollbar since I use `&lt;iframe ... scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;`. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).

How do I hide the scrollbar for webkit browsers?

Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

I have an HTML textarea that is of fixed width, but variable height. I would like to set `overflow:scroll` and be able to show a vertical scrollbar, but not a horizontal one. I am not able to use `overflow:auto` due to other things specific to my situation.

I know there is no way using CSS2 to show only vertical but not horizontal scrollbars. Is there anything I can do with JavaScript to hide the horizontal scrollbar?

Hide html horizontal but not vertical scrollbar

I have this div:

    &lt;div style=&#39;overflow:scroll; width:400px;height:400px;&#39;&gt;here is some text&lt;/div&gt;

The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only visible when there is enough text in the box that they are needed. Like a textarea does. How do I do this? Or is my only option to style a textarea so it looks like a div?

How do I make the scrollbar on a div only visible when necessary?

Is there a way to add a horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I cannot get either scrollbar to appear.

Add a horizontal scrollbar to an HTML table

I have a small issue trying to keep my .html pages at a consistent width on Chrome,
For example I have a page (1) with lots of contents that overflows the viewport&#39;s (right word?) height, so there&#39;s a vertical scroll-bar on that page (1). On page (2) i have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there.

The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2)

I&#39;m still a beginner on HTML/CSS/JS, and I&#39;m fairly convinced that this isn&#39;t so difficult, but i had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.

Prevent scroll-bar from adding-up to the Width of page on Chrome

Can CSS be used to hide the scroll bar? How would you do this?


Hiding the scroll bar on an HTML page

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It&#39;s a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.

**IE10:**

![enter image description here][1]


**CHROME:**

![enter image description here][2]

Anyone know a way of always having the scrollbar fixed in position on IE10?

overflow-y:scroll doesn&#39;t seem to work! it just puts it permanently over my website.


  [1]: http://i.stack.imgur.com/IviR8.jpg
  [2]: http://i.stack.imgur.com/lL51s.jpg

**It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/**

How can I prevent the scrollbar overlaying content in IE10?

How can I determine the height of a horizontal scrollbar, or the width of a vertical one, in JavaScript?

How can I get the browser&#39;s scrollbar sizes?

WebKit/Blink&#39;s (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they&#39;re not in use. [This can be confusing][1]; the scroll bar is often the only visual cue that an element is scrollable.

### Example ([jsfiddle](https://jsfiddle.net/JBXqQ/7/))

#### HTML

    &lt;div class=&quot;frame&quot;&gt;
        Foo&lt;br /&gt;
        Bar&lt;br /&gt;
        Baz&lt;br /&gt;
        Help I&#39;m trapped in an HTML factory! 
    &lt;/div&gt;

#### CSS

    .frame {
        overflow-y: auto;
        border: 1px solid black;
        height: 3em;
        width: 10em;
        line-height: 1em;
    }​

#### WebKit (Chrome) Screenshot

![screenshot of a div with no visible scroll bar][2]

#### Presto (Opera) Screenshot

![screenshot of a div with a visible scroll bar][3] ![][4]

---

How can I force a scroll bar to always be displayed on a scrollable element in WebKit?

  [1]: https://stackoverflow.com/q/6818466 (a related ranty &quot;question&quot;)
  [2]: https://i.stack.imgur.com/WQpxP.png
  [3]: https://i.stack.imgur.com/vXZAD.png
  [4]: https://i.stack.imgur.com/D5VFw.png


Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

How can I define a CSS scrollbar style cross browser? I tested this code, it only works in IE and opera, but failed in Chrome, Safari and Firefox.

    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- 	
    body {
        scrollbar-face-color: #000000;
        scrollbar-shadow-color: #2D2C4D;
        scrollbar-highlight-color:#7D7E94;
        scrollbar-3dlight-color: #7D7E94;
        scrollbar-darkshadow-color: #2D2C4D;
        scrollbar-track-color: #7D7E94;
        scrollbar-arrow-color: #C1C1D1;
    }
    --&gt;
    &lt;/style&gt;



CSS scrollbar style cross browser

When appending `div`s to a `div` with a fixed height, the child divs will appear from top to bottom, sticking at the top border.

    ┌─────────────────────────┐
    │ Child Div 1             │
    │ Child Div 2             │
    │                         │
    │                         │
    │                         │
    └─────────────────────────┘

I&#39;m now trying to display them from bottom to top like this (sticking to the bottom border):

    ┌─────────────────────────┐
    │                         │
    │                         │
    │                         │
    │ Child Div 1             │
    │ Child Div 2             │
    └─────────────────────────┘
    ┌─────────────────────────┐
    │                         │
    │                         │
    │ Child Div 1             │
    │ Child Div 2             │
    │ Child Div 3             │
    └─────────────────────────┘
    ┌───────────────────────┬─┐
    │ Child Div 2           │▲│
    │ Child Div 3           │ │
    │ Child Div 4           │ │
    │ Child Div 5           │█│
    │ Child Div 6           │▼│
    └───────────────────────┴─┘
And so on... I hope you get what I mean.

Is this simply doable with CSS (something like `vertical-align: bottom`)? Or do I have to hack something together with JavaScript?

Stacking Divs from Bottom to Top

Is there a way to hide scrollbar in `ListView`. I know it&#39;s possible for `ScrollView` but can&#39;t find a way for `ListView` scrollbar. Any ideas?

Android hide listview scrollbar?

Is it possible to allow only a horizontal scroll bar when using overflow:auto (or scroll)?

Disable vertical scroll bar on div overflow: auto

What&#39;s the fastest way of checking whether an element has scroll bars?

One thing of course is checking whether element is larger than its viewport, which can easily be done by checking these two values:

    el.scrollHeight &gt; el.offsetHeight || el.scrollWidth &gt; el.offsetWidth

but that doesn&#39;t mean that it has scrollbars as well (so it can actually be scrolled by humans).

Question
--
How do I check for scrollbars in a **1** cross browser and **2** javascript only (as in *no jQuery*) way?

Javascript only, because I need as small overhead as possible, because I&#39;d like to write a very fast jQuery selector filter

    // check for specific scrollbars
    $(&quot;:scrollable(x/y/both)&quot;)

    // check for ANY scrollbar
    $(&quot;:scrollable&quot;)

I suppose I&#39;d have to check for `overflow` style settings but how do I do that in a cross browser way?

Additional edit
--
Not only `overflow` style settings. Checking whether an element has a scrollbar isn&#39;t as trivial as it seems. The first formula I&#39;ve written above works fine when element doesn&#39;t have a border, but when it does (especially when border is of considerable width), `offset` dimension can be larger than `scroll` dimension but the element can still be scrollable. We actually have to subtract borders from `offset` dimension to get the actual scrollable viewport of the element and compare that to `scroll` dimension.

For future reference
--
`:scrollable` jQuery selector filter is included in my `.scrollintoview()` jQuery plugin. Complete code can be found in my [blog post](http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html) if anybody needs it. Even though it didn&#39;t provide the actual solution Soumya&#39;s code considerably helped me solve the problem. It pointed me in the right direction.

Check whether HTML element has scrollbars

I want to add a vertical scrollbar to my `&lt;div&gt;`. I&#39;ve tried `overflow: auto`, but it is not working. I&#39;ve tested my code in Firefox and Chrome. 

I&#39;m pasting the div style code here:

    float: left;
    width: 1000px;
    overflow: auto;

How can I add a vertical scrollbar to my div automatically?

For example:

    &lt;iframe name=&quot;Stack&quot; src=&quot;http://stackoverflow.com/&quot; width=&quot;740&quot;
            frameborder=&quot;0&quot; scrolling=&quot;no&quot; id=&quot;iframe&quot;&gt; ...
    &lt;/iframe&gt;


I want it to be able to adjust its height according to the contents inside it, without using scroll.

Make iframe automatically adjust height according to the contents without using scrollbar?

I have the following markup:

    &lt;div class=&quot;FixedHeightContainer&quot;&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
      &lt;div class=&quot;Content&quot;&gt;
        ..blah blah blah...
      &lt;/div&gt;
    &lt;/div&gt;

The CSS looks like this:

    .FixedHeightContainer
    {
      float:right;
      height: 250px;
      width:250px;  
    }
    .Content
    {
      ???
    }

Due to its content, the height of `div.Content` is typically greater than the space provided by `div.FixedHeightContainer`. At the moment, `div.Content` merrily extends out of the bottom of `div.FixedHeightContainer` - not at all what I want.

How do I specify that `div.Content` gets scrollbars (preferably vertical only, but I&#39;m not fussy) when its height is too great to fit?

`overflow:auto` and `overflow:scroll` are doing nothing, for some bizarre reason.

CSS: how to get scrollbars for div inside container of fixed height

How do I determine, without using jQuery or any other JavaScript library, if a div with a vertical scrollbar is scrolled all the way to the bottom?

My question is not how to scroll to the bottom. I know how to do that. I want to determine if the the div is scrolled to the bottom already.

This does not work:

    if (objDiv.scrollTop == objDiv.scrollHeight) 



How can I determine if a div is scrolled to the bottom?

Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?

How to change scroll bar position with CSS?

I need to hide the horizontal scollbar on an iframe using css, jquery or js.

Hide horizontal scrollbar on an iframe?

When I size my Chrome window to 328 x 455 pixels I still see a horizontal scrollbar.
How can I find out which element is causing this? I&#39;ve been looking at elements via the developer console, but can&#39;t find the element.

I then tried the script I found [here][2], but nothing is logged.
I tried it on element `body`, `section1` and a bunch of others but don&#39;t know what else to do.

        $(function () {
            var f = $(&#39;body&#39;); //document.getElementById(&quot;body&quot;);
            var contentHeight = f.scrollHeight;
            var declaredHeight = $(f).height();

            var contentWidth = f.scrollWidth;
            var declaredWidth = $(f).width();
            if (contentHeight &gt; declaredHeight) {
                console.log(&quot;invalid height&quot;);
            }
            if (contentWidth &gt; declaredWidth) {
                console.log(&quot;invalid width&quot;);
            }
        });


  [1]: https://www.toptrouwen.nl
  [2]: https://stackoverflow.com/questions/14146356/which-element-is-causing-the-horizontal-scrollbar-automated-detection

Find element that is causing the showing of horizontal scrollbar in Google Chrome

Following up to my previous question (https://stackoverflow.com/questions/19420923/add-a-scrollbar-to-a-textarea) on how to always see the scrollbar in a `&lt;textarea&gt;`, I am now wondering how you would set it so that there is no scrollbar in the `&lt;textarea&gt;`, even when the text overflows. To scroll down with this, you would use the arrow keys or the mouse to navigate through the text.

How can I do this?

Remove scrollbars from textarea

I need to get scroll events from a div with overflow: scroll in my Angular 2 app.

It seems [onscroll event][1] do not works on Angular 2.

How could I achieve that?


  [1]: http://www.w3schools.com/jsref/event_onscroll.asp

How to get on scroll events?

My objective is to add a vertical scroll bar to a frame which has several labels in it. The scroll bar should automatically enabled as soon as the labels inside the frame exceed the height of the frame. After searching through, I found [this][1] useful post. Based on that post I understand that in order to achieve what i want, (correct me if I am wrong, I am a beginner) I have to create a `Frame` first, then create a `Canvas` inside that frame and stick the scroll bar to that frame as well. After that, create another frame and put it inside the canvas as a window object. So, I finally come up with this:

    from Tkinter import *

    def data():
        for i in range(50):
           Label(frame,text=i).grid(row=i,column=0)
           Label(frame,text=&quot;my text&quot;+str(i)).grid(row=i,column=1)
           Label(frame,text=&quot;..........&quot;).grid(row=i,column=2)
        
    def myfunction(event):
        canvas.configure(scrollregion=canvas.bbox(&quot;all&quot;),width=200,height=200)

    root=Tk()
    sizex = 800
    sizey = 600
    posx  = 100
    posy  = 100
    root.wm_geometry(&quot;%dx%d+%d+%d&quot; % (sizex, sizey, posx, posy))

    myframe=Frame(root,relief=GROOVE,width=50,height=100,bd=1)
    myframe.place(x=10,y=10)

    canvas=Canvas(myframe)
    frame=Frame(canvas)
    myscrollbar=Scrollbar(myframe,orient=&quot;vertical&quot;,command=canvas.yview)
    canvas.configure(yscrollcommand=myscrollbar.set)

    myscrollbar.pack(side=&quot;right&quot;,fill=&quot;y&quot;)
    canvas.pack(side=&quot;left&quot;)
    canvas.create_window((0,0),window=frame,anchor=&#39;nw&#39;)
    frame.bind(&quot;&lt;Configure&gt;&quot;,myfunction)
    data()
    root.mainloop()

 1. Am I doing it right? Is there better/smarter way to achieve the output this code gave me?
 2. Why must I use grid method? (I tried place method, but none of the labels appear on the canvas.)
 3. What so special about using `anchor=&#39;nw&#39;` when creating window on canvas?

Please keep your answer simple, as I am a beginner.

  [1]: https://stackoverflow.com/questions/3085696/adding-a-scrollbar-to-a-grid-of-widgets-in-tkinter

Tkinter scrollbar for frame

How do you add a scrollbar to a Panel control with many controls in windows form application?

I have a `div` layer with `overflow` set to `scroll`. 

When scrolled to the bottom of the `div`, I wanna run a function.

&lt;br/&gt;
&lt;img src=&quot;https://i1131.photobucket.com/albums/m541/protein-1/scroll.jpg&quot;/&gt;

javascript: detect scroll end

How can I get rid of the scrollbars on a [`HorizontalScrollView`](https://developer.android.com/reference/android/widget/HorizontalScrollView.html)?

Hide Scrollbar of HorizontalScrollView

I want to customize a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

```lang-css
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track-piece {
  background-color: #c2d2e4;
}

::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0a4c95;
}
```

How can I do the same thing in Firefox?

I know I can easily do it using jQuery, but I would prefer to do it with pure CSS if it&#39;s doable.

Custom CSS Scrollbar for Firefox

Okay I&#39;m using jQuery and currently getting max value of scrollbar doing this:

    var $body = $(&#39;body&#39;);
    $body.scrollLeft(99999); // will give me the max value since I&#39;ve overshot
    var max_value = $body.scrollLeft(); // returns 300
    $(&#39;body&#39;).scrollLeft(0);

When I try this: `$body[0].scrollWidth` I just get the actual width of the contents - 1580

I&#39;m thinking there has to be a better way I&#39;m forgetting.

**EDIT**
To clarify, I also tried `$(window).width()` and `$(document).width()` which gave me 1280 and 1580, respectively.

How do I get the max value of scrollLeft?

I have a `ListView` with padding to the right (and left).

Currently the list looks something like this:

    -----------------  |
    | ROW         | |  |
    |-------------| |  |
    | ROW         | |  |
    |-------------|#|  |
    | ROW         |#|  |
    |-------------| |  |
    | ROW         | |  |
    -----------------  |

Where the right-most line is the edge of the screen, with the `#`s being the scrollbar and the white space to the right of it being the `ListView`&#39;s padding to the right.

What I is for the scroll bar to be to the right of the padding like this:

                        _
    -----------------  | |
    | ROW           |  | |
    |---------------|  | |
    | ROW           |  |#|
    |---------------|  |#|
    | ROW           |  |#|
    |---------------|  | |
    | ROW           |  | |  
    -----------------  |_|

Is it possible to move the scrollbar like that or will I have to change the layouts for each row to have an invisible border of the right size?

Note currently each row has a separate background set by the adapter, since I&#39;m making a floating window for my `ListView` and unfortunately one of my screens require me to do this in order to get it to look the way I want.

Reposition scroll bar of ListView with padding

Background
--
On ListView, you could have a fast scroller which allowed you to drag a scrollbar to easily scroll to wherever you wished (using [**fastScrollEnabled**][1] attribute)

Together with &quot;[**SectionIndexer**][2]&quot; class and optionally some attributes, you could have a nice popup that shows as you use this scrollbar (link [**here**][3]).

Such a thing is shown on the contacts app so that you could scroll easily to specific letters.

The problem
--
RecyclerView doesn&#39;t seem to have any of those. Not even a fast-scroll.

The question
--
How do I add a fast scroller functionality for the RecyclerView?


  [1]: http://developer.android.com/reference/android/widget/AbsListView.html#attr_android:fastScrollEnabled
  [2]: http://developer.android.com/reference/android/widget/SectionIndexer.html
  [3]: http://androidopentutorials.com/android-listview-fastscroll/

How to add a fast-scroller to the RecyclerView

I have `PictureBox picture`.

I use:

    picture.Size = bmp.Size;
    picture.Image = bmp;

Let&#39;s say there are two integers `maxWidth` and `maxHeigth`.  
I want to add vertical/horizontal scrollbar to `picture` when its size exceeds `maxWidth` and/or `maxHeight`. How can I do that?

How can I get scrollbars on Picturebox

I have a `TextBlock` in WPF. I write many lines to it, far exceeding its vertical height. I expected a vertical scroll bar to appear automatically when that happens, but it didn&#39;t. I tried to look for a scroll bar property in the Properties pane, but could not find one.

How can I make vertical scroll bar created automatically for my `TextBlock` once its contents exceed its height?

Clarification: I would rather do it from the designer and not by directly writing to the XAML.

Automatic vertical scroll bar in WPF TextBlock?

I have the following requirement:

 - At first, data for page no: 2 is fetched from the server &amp; the items
   are populated in a ListView.

Considering that both the prev page &amp; next page are available in a scenario, the following code has been added:

     if(prevPageNo &gt; 0){
        mListViewActual.setOnScrollListener(this);
     }
        
     if(nextPageNo &gt; 0){
        mListViewActual.setOnScrollListener(this);
     }


What conditions should I put to detect scroll up &amp; scroll down on the following methods:

 1. void onScroll(AbsListView view, int firstVisibleItem, int
    visibleItemCount, int totalItemCount)
 2. void onScrollStateChanged(AbsListView view, int scrollState)

After the action: scroll up &amp; scroll down is detected , accordingly a service will be called with either the prev page no or next page no , to fetch the items to be populated in the Listview.

Any inputs will be helpful.

Gone through the following links but its not returning the correct scroll up / scroll down action:

[link 1][1]
[link 2][2]

  [1]: https://stackoverflow.com/questions/9629872/how-to-detect-if-a-listview-is-scrolling-up-or-down-in-android
  [2]: https://stackoverflow.com/questions/12114963/detecting-the-scrolling-direction-in-the-adapter-up-down

Detect Scroll Up &amp; Scroll down in ListView

Is it possible to add padding or margin around the scrollbar item or scrollbar-track?  I&#39;ve tried and can only get padding top/bottom.  Adding padding to the UL has no effect on scrollbar.  Negative margins on scrollbar have no effect.  Ideas?  [JS Fiddle here][1].


  [1]: http://jsfiddle.net/9z2qy/

    ::-webkit-scrollbar {
    width: 12px;
    margin:10px;
    }
 
    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 10px
    }
 
    ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
    ::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 


CSS vertical scrollbar padding left/right in UL possible?

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one `div` and not the whole page?

CSS customized scroll bar in div

I have this HTML structure:

    &lt;div id=&quot;body&quot;&gt;
        &lt;div id=&quot;head&quot;&gt;
            &lt;p&gt;Dynamic height without scrollbar&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;content&quot;&gt;
            &lt;p&gt;Dynamic height with scrollbar&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;foot&quot;&gt;
            &lt;p&gt;Fixed height without scrollbar&lt;/p&gt;
        &lt;/div&gt;  
    &lt;/div&gt;



I want to have the three parts inside the main part (#body) without overflow. So I need a scroll bar in the middle part.


I tried this CSS:

    #content{
        border: red solid 1px;
        overflow-y: auto;
    }

And this:


    #content{
        border: red solid 1px;
        overflow-y: auto;
        height: 100%;
    }

But neither of them work.

I made an example at [JSFiddle](http://jsfiddle.net/6WAnd/).

Can I do this with only CSS and HTML? I&#39;d prefer to avoid Javascript.

Scrollbar without fixed height/Dynamic height with scrollbar

Is it possible to increase the width of a scrollbar on a `&lt;div&gt;` element placed inside the `&lt;body&gt;`?

I am not talking about the default scrollbar on the *browser itself*, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner `&lt;div&gt;` element has its own scrollbar.

How can I increase a scrollbar&#39;s width using CSS?

I&#39;m trying to create custom events in JQuery that are supposed to detect when a scrollbar is clicked&lt;sup&gt;1&lt;/sup&gt;.  
I know there&#39;s lots of text, but all my questions are boldfaced and there&#39;s a [JSFiddle example][1] you can work on straight away.

Because I haven&#39;t found any built in functionality for this,  
I had to create a `hasScroll` function, checking if the element has a scrollbar, 

    $.fn.hasScroll = function(axis){
        var overflow = this.css(&quot;overflow&quot;),
            overflowAxis;
        
        if(typeof axis == &quot;undefined&quot; || axis == &quot;y&quot;) overflowAxis = this.css(&quot;overflow-y&quot;);
        else overflowAxis = this.css(&quot;overflow-x&quot;);
        
        var bShouldScroll = this.get(0).scrollHeight &gt; this.innerHeight();
        
        var bAllowedScroll = (overflow == &quot;auto&quot; || overflow == &quot;visible&quot;) ||
                             (overflowAxis == &quot;auto&quot; || overflowAxis == &quot;visible&quot;);
        
        var bOverrideScroll = overflow == &quot;scroll&quot; || overflowAxis == &quot;scroll&quot;;
        
        return (bShouldScroll &amp;&amp; bAllowedScroll) || bOverrideScroll;
    };
 
and an `inScrollRange` function, checking if the click performed was within the scroll range.

    var scrollSize = 18;

    function inScrollRange(event){
        var x = event.pageX,
            y = event.pageY,
            e = $(event.target),
            hasY = e.hasScroll(),
            hasX = e.hasScroll(&quot;x&quot;),
            rX = null,
            rY = null,
            bInX = false,
            bInY = false
        
        if(hasY){
            rY = new RECT();
            rY.top = e.offset().top;
            rY.right = e.offset().left + e.width();
            rY.bottom = rY.top +e.height();
            rY.left = rY.right - scrollSize;
                
            //if(hasX) rY.bottom -= scrollSize;
            bInY = inRect(rY, x, y);
        }
                
        if(hasX){
            rX = new RECT();
            rX.bottom = e.offset().top + e.height();
            rX.left = e.offset().left;
            rX.top = rX.bottom - scrollSize;
            rX.right = rX.left + e.width();
            
            //if(hasY) rX.right -= scrollSize;
            bInX = inRect(rX, x, y);
        }
                 
        return bInX || bInY;
    }

**Are all scrollbar sizes uniform? E.g in Firefox and IE it&#39;s 18px.**  
Assuming there are no customized scrollbars, is there any extra padding or sizes in some browsers?

These functions all perform as intended (from what I can discern).


Making custom events was a bit trickier, but I got it to work somewhat. The only problem is that if the element clicked has a mousedown/up event attached to it, that will be triggered as well.

I can&#39;t seem to stop the other events from triggering while simultaneously triggering, what I call, the mousedownScroll/mouseupScroll events.  


    $.fn.mousedownScroll = function(fn, data){
        if(typeof fn == &quot;undefined&quot; &amp;&amp; typeof data == &quot;undefined&quot;){
            $(this).trigger(&quot;mousedownScroll&quot;);
            return;
        }
        
        $(this).on(&quot;mousedownScroll&quot;, data, fn);
    };
    
    $.fn.mouseupScroll = function(fn, data){
        if(typeof fn == &quot;undefined&quot; &amp;&amp; typeof data == &quot;undefined&quot;){
            $(this).trigger(&quot;mouseupScroll&quot;);
            return;
        }
        
        $(this).on(&quot;mouseupScroll&quot;, data, fn);
    };

    $(document).on(&quot;mousedown&quot;, function(e){
        if(inScrollRange(e)){
            $(e.target).trigger(&quot;mousedownScroll&quot;);
        }
    });
    
    $(document).on(&quot;mouseup&quot;, function(e){
        if(inScrollRange(e)){
            $(e.target).trigger(&quot;mouseupScroll&quot;);
        }
    });

    $(&quot;selector&quot;).mousedown(function(e){
        console.log(&quot;Clicked content.&quot;); //Fired when clicking scroller as well
    });
    
    $(&quot;selector&quot;).mousedownScroll(function(e){
        console.log(&quot;Clicked scroller.&quot;);
    });

**How do I stop the other &quot;click&quot; events from triggering?**

While I&#39;m asking, please feel free to optimize the code as much as possible.

**[Here&#39;s a JSFiddle to mess around with.][1]**

The reason I&#39;m making this is because of a bigger plugin I&#39;m developing. It&#39;s got a custom context menu that is showing up when I right click one of the scrollers. I don&#39;t want that. So I thought I should make an event that checks for scroll clicks (mouseup/downs) and then prevent the context menu from being displayed. In order to do that though, I need the scroll click to come before the normal click, and also, if possible, stop the normal clicks from firing.

**I&#39;m just thinking out loud here but** maybe there&#39;s a way to get all the functions that are bound to the element and then switch the order in which they were added? I know that functions are executed in the order they were added (1st added 1st called), so, if I could tap into that process, perhaps the whole &quot;registering&quot; of the event to JQuery could just be inserted before the click events.

----------

&lt;sup&gt;&lt;sup&gt;1&lt;/sup&gt; can only use mousedown/mouseup because click doesn&#39;t trigger when clicking on a scrollbar. If this is false, please provide a working example/code&lt;/sup&gt;

  [1]: http://jsfiddle.net/aKejW/

Determine whether user clicking scrollbar or content (onclick for native scroll bar)

Background
--
I&#39;ve made a library that shows a fast-scroller for RecyclerView ([**here**][1], in case anyone wants), and I want to decide when to show and when to hide the fast-scroller.

I think a nice decision would be that if there are items that aren&#39;t shown on the screen (or there are a lot of them that do not appear), after the RecyclerView finished its layout process, I would set the fast-scroller to be visible, and if all items are already shown, there is no need for it to be shown.

The problem
--
I can&#39;t find a listener/callback for the RecyclerView, to tell me when it has finished showing items, so that I could check how many items are shown compared to the items count.

The recyclerView might also change its size when the keyboard appears and hides itself.

What I&#39;ve tried
--
The scrolling listener will probably not help, as it occurs &quot;all the time&quot;, and I just need to check only when the RecyclerView has changed its size or when the items count (or data) has changed.

I could wrap the RecyclerView with a layout that notifies me of size changes, like [this one][2] that I&#39;ve made, but I don&#39;t think it will work as the RecyclerView probably won&#39;t be ready yet to tell how many items are visible.

The way to check the number of items being shown might be used as such:

        final LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false);
        mRecyclerView.setLayoutManager(layoutManager);
        ...
        Log.d(&quot;AppLog&quot;, &quot;visible items count:&quot; + (layoutManager.findLastVisibleItemPosition() -layoutManager.findFirstVisibleItemPosition()+1));


The question
--
How do I get notified when the recyclerView has finished showing its child views, so that I could decide based on what&#39;s currently shown, to show/hide the fast-scroller ? 


  [1]: https://github.com/AndroidDeveloperLB/LollipopContactsRecyclerViewFastScroller
  [2]: https://stackoverflow.com/a/25895869/878126

All Scrollbar Solutions on Gang of Coders

Total of 45 Scrollbar Solutions