保证你的滚动条样式不被拉伸_卷滚条滑块自动拉伸-优快云博客

本文提供了解决在Flash CS和Flex项目中滚动条滑块因内容变化而自动缩放导致失真的解决方案。通过重载滚动条组件的updateThumb方法或重写容器的updateDisplayList方法，可以避免滑块皮肤被拉伸或缩放。适用于需要自定义滚动条外观的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一篇老文章，以前关注的人较少，现在发在自己博客中，做一个记录。

有很多人在项目中使用滚动条组件（对于使用flash CS工具进行开发或者纯AS项目中使用CS中提供的组件fl.controls.UIScrollBar或者使用Flex中所有容器类自带的滚动条）使会为它们设置样式/皮肤，但是会偶尔发现，我TMD给你设计的滚动条滑块本来是个好好的图片，但它滚动条会随着内容而自动进行滑块的缩放，导致我滑块皮肤被拉伸或缩放得失真了，这可肿么办才好？愁煞老夫也~

在百度上搜索无果，只能求助于Google大师，果不出所料，有不少老外也遇到此问题并给出了解决方案，那么就让我们一同来看看。

使用fl.controls.UIScrollBar

在纯AS项目或者使用CS工具进行开发时我们会用到fl.controls.UIScrollBar这个组件，但是此滚动条组件会根据滚动内容的多少进行滚动条缩放，以致皮肤失真。那么此组件进行滑块缩放的代码被放置在一个叫做updateThumb的protected方法中，所以我们可以重载此方法来做到回避滑块缩放的工作。首先，确保你已导入fl.controls包，之后，新建一个类继承于fl.controls.UIScrollBar，这里我们就叫它为UIScrollBar_thumb好了，我们在这个类里面进行updateThumb方法的重载工作，代码如下：

 
   01. 
   package tests 
  
   02. 
   { 
  
   03. 
       importfl.controls.ScrollBar;  
  
   04. 
       importfl.controls.UIScrollBar;  
  
   05. 
          
   06. 
       publicclass UIScrollBar_thumb extendsfl.controls.UIScrollBar  
  
   07. 
       { 
  
   08. 
           /** 指定的高度。若不设置或设置为0以下的数字，则滚动条自动计算大小并拉伸 */ 
  
   09. 
           publicvar explicitHeight:Number= 0;  
  
   10. 
              
   11. 
           publicfunction UIScrollBar_thumb()  
  
   12. 
           { 
  
   13. 
                  
   14. 
           } 
  
   15. 
           override protectedfunction updateThumb():void  
  
   16. 
           { 
  
   17. 
               if( explicitHeight > 0 ) 
  
   18. 
               { 
  
   19. 
                   varper:Number = maxScrollPosition - minScrollPosition + pageSize;  
  
   20. 
                   if(track.height < = explicitHeight || maxScrollPosition <= minScrollPosition || (per == 0 || isNaN(per)))   
  
   21. 
                   { 
  
   22. 
                       thumb.height= explicitHeight;  
  
   23. 
                       thumb.visible= false; 
  
   24. 
                   }  
  
   25. 
                   else  
  
   26. 
                   { 
  
   27. 
                       thumb.height= explicitHeight;  
  
   28. 
                       thumb.y = track.y+(track.height-thumb.height)*((scrollPosition-minScrollPosition)/(maxScrollPosition-minScrollPosition)); 
  
   29. 
                       thumb.visible= enabled; 
  
   30. 
                   } 
  
   31. 
               } 
  
   32. 
               else 
  
   33. 
               { 
  
   34. 
                   super.updateThumb(); 
  
   35. 
               } 
  
   36. 
           } 
  
   37. 
       } 
  
   38. 
   }

这段代码参考自http://www.bigresource.com/FLASH-extend-UIScrollBar-to-set-thumb-to-not-scale-qT52NGnEPx.html，为什么要这样写我也不是很明了，毕竟我们看不到UIScrollBar的源码。这段代码大致意思就是在需要调整滑块高度的时候始终设置其高度为指定值即可保证滑块始终不会被拉伸以致失真。在使用的时候你只需要所有要用到UIScrollBar的地方改用上面这个UIScrollBar_thumb 类来代替即可，别忘了指定explicitHeight的值。

使用Flex3容器自带滚动条

在Flex3里面，默认情况下全部容器都是自带了滚动条的，而众所周知，Flex组件的外观更新工作都是在updateDisplayList方法中进行的，因此我们可以建立一个所要使用容器（如mx.controls.List）的子类并重载updateDisplayList方法，在重载的方法中把所有需要设置滚动条滑块高度的地方改掉即可，参考代码如下：

 
   01. 
   package com.ice.stonekey.commoncomponents { 
  
   02. 
          
   03. 
       importmx.controls.List;  
  
   04. 
       importmx.core.mx_internal;  
  
   05. 
          
   06. 
       use namespace mx_internal; 
  
   07. 
          
   08. 
       /** 
  
   09. 
        * 让滚动条图标不被拉伸的List控件  
  
   10. 
        *  
  
   11. 
        */ 
  
   12. 
       publicclass CustomList extendsList {  
  
   13. 
              
   14. 
           /** 滑块指定高度 */ 
  
   15. 
           publicvar vThumbExplicitHeight:Number= 120;  
  
   16. 
              
   17. 
           override protectedfunction updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
  
   18. 
           { 
  
   19. 
               if(verticalScrollBar){ 
  
   20. 
                   verticalScrollBar.scrollThumb.minHeight = vThumbExplicitHeight; 
  
   21. 
                   verticalScrollBar.setScrollProperties(0,verticalScrollBar.minScrollPosition, 
  
   22. 
                       verticalScrollBar.maxScrollPosition,0); 
  
   23. 
               } 
  
   24. 
               super.updateDisplayList(unscaledWidth, unscaledHeight);  
  
   25. 
                  
   26. 
           } 
  
   27. 
      
   28. 
       } 
  
   29. 
   }