Как скрыть вертикальную полосу прокрутки (не отключая ее)?

Question

У меня есть список, но я хочу скрыть полосу прокрутки, но при этом сохранить функциональность. Если я установил verticalScrollPolicy = "off", это отключит прокрутку с помощью колесика мыши на окнах (100% моих пользователей используют окна). Как я могу скрыть полосу прокрутки визуально, но сохранить возможность прокрутки с помощью клавиатуры и колесика мыши?

<?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

Я полагаю, что вы захотите сделать это, чтобы установить собственный скин для списка, который затем устанавливает собственный скин для компонента Scroller внутри него. В скине Scroller вы можете установить полосу прокрутки как видимая = false.

Answer 2

Просто введите:

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

Этот код решит мою проблему =)

Answer 3

Я искал решение для этого вопроса, и я думаю, что это проблема многих людей, поэтому я решил ответить на этот вопрос, хотя он довольно старый.

Решение вашей проблемы очень простое. Вы просто создаете собственную обложку для скроллера, а внутри скроллера просто устанавливаете свойство «alpha» вертикального скроллера на ноль

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

Надеюсь, это кому-нибудь поможет

Answer 4

Чтобы скрыть полосы прокрутки, но при этом иметь доступ к функциям прокрутки, необходимо создать собственный скин и стиль css.

1. Создайте пользовательский скин для VScrollBar со следующими настройками:

   Хост-компонент: spark.components.VScrollBar

   Выберите «Создать как копию:» и выберите «spark.skins.spark.VScrollBarSkin»

2. Отредактируйте тег "SparkSkin" в своей пользовательской обложке, добавив " minWidth =" 0 "minHeight =" 0 "width =" 0 "height =" 0 "alpha =" 0 "visible =" 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">

3. Затем отредактируйте свой собственный скин, добавив " 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" />
   

4. Добавьте стиль к вашему css (замените «assets.skins» на расположение файла скина в вашем проекте):

   с | Список с | VScrollBar { skinClass: ClassReference ("assets.skins.VerticalScrollBarHidden"); }

   Этот стиль будет применяться только к компонентам списка, поэтому полоса прокрутки будет по-прежнему видимой для других компонентов. Если вы хотите полностью удалить полосы прокрутки, удалите «s | List» из определения стиля.

5. Наконец добавьте таблицу стилей в компонент mxml приложения (замените «assets / css / Styles.css» на расположение таблицы стилей):

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

Answer 5

Вы можете использовать verticalScrollPolicy = "off" и создать прослушиватель для события прокрутки мыши, чтобы запустить прокрутку при наведении курсором мыши на список.