Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

scrollbar, customize scrollbar

$
0
0

Hello there,

 

I have the following problem:

 

I need to make a scrollbar for IOS to scroll a bunch of pictures alonge my side.

 

So thanks, I stumble over the realy nice tutorial from ZAXIST.

 

Originaly the tutorial was made for scrolling text, but he also explains how to combine a  symbol

with a scrollbar.

 

But there is my problem, it does not work.

 

 

 

Sorry for that I dont ask ZAXIST directly, but as I know there is no way in this forum,

 

and the originaly discussion is one year ago, so I think there is no chance to put

 

my question in this discussion.

 

If there is another way, let me know and I will delete my "article".

 

But for now here is the changed version and the originally as a zip file:

 

http://go-motion.net/upload/examples/17/two_versions.zip

 

and I need it for my following site (menue_work):

 

http://go-motion.net/upload/examples/15/GO-motion.html

 

 

His explanation is the following:

 

Hi lan

 

i'm glad that you liked my Tutorial, anyway your answer is yes

here is a way that you can create an custom scrollbar and apply it to your stage and all other diffrent text layers and diffrent formating and etc...

 

this would affect on all symbols and div and text that you Set their Overflow to scroll or auto !!

but you can have your text scroll style by First tutorial and all others with this tutorial looks like Multi Scrollbars in the end

 

you just have to Open your Project Name.html file with Dreamweaver or Notepad and add these codes inside of body style tag like below :

 

<body style="margin:0;padding:0;">

          <div id="Stage" class="EDGE-XXXXXXXX">

          </div>

 

<style scoped contenteditable>/* For the "inset" look only */

/* Let's get this party started */

::-webkit-scrollbar {

    width: 12px;

}

 

/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

 

/* Handle */

::-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);

}

</style>

 

</body>

 

 

Note :  This just Work on  (Maxthon, Google Chrome and Safari) Browsers and also with new Apple Devices...

it Won't Work with IE and Firefox

 

Zaxist.


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>