7 Replies Latest reply on Jan 27, 2014 5:10 AM by darsh136

    scrollbar, customize scrollbar

    oliverS Level 1

      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:

       

      Any help would be great...

       

      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.