Question

我有一个列表，但想要隐藏滚动条但仍保留功能。如果我将verticalScrollPolicy =“off”，则禁用通过Windows上的鼠标滚轮滚动（100％的用户使用Windows）。如何在视觉上隐藏滚动条，但是能够通过键盘和鼠标滚轮滚动？

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
           xmlns:mx="library://ns.adobe.com/flex/mx"     
           xmlns:s="library://ns.adobe.com/flex/spark"  height="100%" width="100%">

<s:Group>
    <s:List id="listy" width="50%" height="100">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:List>

</s:Group>

Answer 1

我相信你想要的方式为List设置自定义外观，然后为其中的Scroller组件设置自定义外观。在Scroller皮肤中，您可以将滚动条设置为visible = false。

Answer 2

只需输入：

<s:Scroller id="myScroller" verticalScrollBar="{new VScrollBar()}">

此代码解决了我的问题=）

Answer 3

我一直在寻找这个问题的解决方案，我认为很多人都会遇到这个问题，所以我决定回答这个问题，虽然它很老了。

您的问题的解决方案非常简单。您只需为滚动条创建自定义外观，在滚动条内部只需将垂直滚动条“alpha”属性设置为零

<s:VScrollBar id="verticalScrollBar" visible="false" alpha="0"/>

希望这会有所帮助

Answer 4

您可以使用verticalScrollPolicy =“off”并为鼠标滚动事件创建一个侦听器，以便在鼠标悬停在列表中时触发滚动。

Answer 5

为了隐藏滚动条但仍然可以访问滚动功能，您需要创建自定义皮肤和CSS样式。

使用以下设置为VScrollBar创建自定义外观：

主机组件：spark.components.VScrollBar

选择“创建为：的副本”，然后选择“spark.skins.spark.VScrollBarSkin”
通过添加“ minWidth =”0“minHeight =”0“width =”0“height =”0“alpha =”0“visible =”编辑自定义皮肤中的“SparkSkin”标签false“contentBackgroundAlpha =”0“”

<强>原始

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="35" alpha.disabled="0.5" alpha.inactive="0.5" >

<强>定制

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="0" minHeight="0" width="0" height="0" alpha="0" visible="false" contentBackgroundAlpha="0">

然后通过向每个元素添加“ alpha =”0“visible =”false“width =”0“”来编辑自定义皮肤：

<强>原始

<s:Button id="track" top="16" bottom="15" height="54"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.VScrollBarTrackSkin" />

<s:Button id="thumb" 
          focusEnabled="false" visible.inactive="false" tabEnabled="false"
          skinClass="spark.skins.spark.VScrollBarThumbSkin" />

<s:Button id="decrementButton" top="0" enabled.inactive="false"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />

<s:Button id="incrementButton" bottom="0" enabled.inactive="false"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />

<强>定制

<s:Button id="track" top="16" bottom="15" height="54" alpha="0" visible="false" width="0"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.VScrollBarTrackSkin" />

<s:Button id="thumb"  alpha="0" visible="false" width="0"
          focusEnabled="false" visible.inactive="false" tabEnabled="false"
          skinClass="spark.skins.spark.VScrollBarThumbSkin" />

<s:Button id="decrementButton" top="0" enabled.inactive="false" alpha="0" visible="false" width="0"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />

<s:Button id="incrementButton" bottom="0" enabled.inactive="false" alpha="0" visible="false" width="0"
          focusEnabled="false" tabEnabled="false"
          skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />

在css中添加样式（将“assets.skins”更改为项目中skin文件的位置）：

s |列表s | VScrollBar { skinClass：ClassReference（“assets.skins.VerticalScrollBarHidden”）; }

此样式仅适用于List组件，因此滚动条对于其他组件仍然可见。如果您想完全删除滚动条，请从样式定义中删除“s | List”。
最后将样式表添加到应用程序mxml组件中（将“assets / css / Styles.css”替换为样式表的位置）：

<fx:Style source="assets/css/Styles.css"/>

如何隐藏垂直滚动条（不禁用它）？

5 个答案: