I have the following setting: http://jsfiddle.net/dobbylan/DnmvR/5/
In this example, scrolling the maindiv also scrolls the upper/left div.
However I'd like to exchange the native Scrollbars for Javascript Scrollbars.
I have been searching the web for some simple Javascript code that provides a minimalistic Scrollbar AND allows for scrolling multiple DIVs.
Any hints on a simple JS code snippet that provides a simple Scrollbar and can scroll multiple DIVs?
If you are willing to use jQuery, I found a nifty plugin that will do it for you. It can be styled with CSS, so it can fit the look of your site as well. Check out the demo to see for yourself...
A quick look at the source of the demo page also shows you how to use it:
$("selector").mCustomScrollbar(
[direction],
[easing],
[easing type],
[bottom scrolling space],
[scrollbar adjust],
[mouse-wheel support],
[button-scroll support],
[button-scroll speed]
);
Related
I'm trying to figure out how to have fixed scrolling in a webpage like what's used here: http://manifeste.hermes.com/en_WW/?
It looks like when you scroll it automatically smooth scrolls to the next div. I assume there's some JavaScript involved, but it's beyond my knowledge how to do this.
Can anyone show me how this is done?
You can use this nice, lightweight javascript plugin alvarotrigo fullPage.js
they have a nice explanation and examples on the github page.
fullPage.js Demo
I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe
I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.
I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.
Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.
Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?
I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
This should help: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Another one here: http://dotroe.com/subpage.html
Those are jquery plugins that you can use on your pages.
Use j scroll pane. It's great, very customisable, lots of demos here: http://jscrollpane.kelvinluck.com/#examples
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.