Adding Custom Scrollbar

qubbah · October 20, 2014, 11:57:04 AM

Hi there...

How can we add a custom scrollbar...

i think to support custom scrollbar for all web browser we need to using javascript.

Hope anyone can suggest how to do? tq

Kindred · October 20, 2014, 02:17:39 PM

ummm..... custom scrollbar... where?

qubbah · October 20, 2014, 07:15:36 PM

its look like from http://baijs.nl/tinyscrollbar/ or http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html or etc...

Kindred · October 20, 2014, 08:35:23 PM

No idea. I see nothing special thrre... Please be specific and clear when you make a request. So far, you have been neither

qubbah · October 21, 2014, 11:37:42 AM

example
echo '<div style="width: 100%; height: 356px; overflow: auto">';
if (!isset($_GET['board']) || isset($_GET['topic']))
------------------------------------------------------------

i want to change scrollbar style to custom one.
its look like from http://baijs.nl/tinyscrollbar/ or http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html or etc... hope someone can help. tq

Boban ツ · October 21, 2014, 06:00:45 PM

first download attach file, and put in folder scripts in your theme

open index.template find:

Code Select

<head>';

and replace with this:

Code Select

<head>
	<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.min.js"></script>
	<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.nicescroll.min.js"></script>

	<script>
		$(document).ready(function() {
			var nice = $("html").niceScroll();
			$("#test").niceScroll({cursorborder:"",cursorcolor:"",boxzoom:true});
			$("#version_details").niceScroll({cursorborder:"",cursorcolor:"",boxzoom:true});
			$("#message").niceScroll({cursorborder:"",cursorcolor:"",boxzoom:true});
		});
	</script>';

open index.css and add this, that is a color for this http://i.imgur.com/F18VJYE.png

Code Select

#ascrail2000 {
   background: #444444;
   border-left: 1px solid #000000;
}

you can also edit this, in jquery.nicescroll.min, that is a color for this http://i.imgur.com/Xw9heWt.png

color: cursorcolor:"#3587b6"
border: cursorborder:"0px solid #fff"
width: cursorwidth:"8px"
radius: cursorborderradius:"0px"

sorry for my bad english...

Powerd by: Nicescroll

qubbah · October 22, 2014, 10:07:24 PM

must i change

echo '<div style="width: 100%; height: 356px; overflow: auto">';
if (!isset($_GET['board']) || isset($_GET['topic']))

to

echo '<div class="ascrail2000" "width: 100%; height: 356px; overflow: auto">';
if (!isset($_GET['board']) || isset($_GET['topic']))

but it cant be done..

News:

Adding Custom Scrollbar

qubbah

Kindred

qubbah

Kindred

qubbah

Boban ツ

qubbah