Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How do you create a html scrollable area, that just uses the main browser scrollbar

Tags:

javascript

html

css

scroll

I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.

There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?

Cheers,

Phil.

like image 431
Phil Avatar asked Feb 07 '11 14:02

Phil

People also ask

How do you make a scrollable section in HTML?

Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. Example 1: html.

How do I add a scrollbar to a section in HTML?

Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.

How do I customize my browser scrollbar?

Scrollbar Selectors For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.

How do you make a container scrollable?

A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The scroll container allows the user to scroll through parts of the overflow region that would otherwise be clipped and hidden from view.

2 Answers

It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.

Edit

I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3

like image 177
Sotiris Avatar answered Sep 27 '22 20:09

Sotiris

Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html

like image 25
mrhaki Avatar answered Sep 27 '22 20:09

mrhaki
Sign in to Comment

Related questions

Is it possible to make real-time network games in JavaScript
javascript input via native popup
Resize and Center image with jQuery
Using Javascript To Change The Very TYPE Of Tag
HTML JavaScript onChange Handler is not called when updated programatically
How to create jigsaw puzzle from an image using javascript
can I load a javascript file under a context other than 'window'?
Javascript can't find my mod_rewrite query string!
jQuery - select invisible text overlaid on image, ala GMail PDF viewer
assign event to div when it has loaded fully
How do I add a loading indicator to my page while my iframe loads?
Can't access global variable in jQuery $.get within function
Geolocating 802.11 access points by MAC address using Google Geolocation API
Storing a multidimensional array in a cookie?
How do I create a popup window when doing oauth?
Is there a way to try/catch an entire page dynamically?
How do I trigger a function when the time reaches a specific time
Are there any open source JavaScript/HTML recurrence rule builders for iCalendar RRules? [closed]
JavaScript file load order and dependency management
javascript: different constructors for same type of object

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!