如何使用 xml 或 Javascript 在 SAP-ui5 中创建水平滚动条答案

【问题标题】：how to create a horizontal scrollbar in SAP-ui5 using xml or Javascript如何使用 xml 或 Javascript 在 SAP-ui5 中创建水平滚动条
【发布时间】：2020-09-14 11:20:07
【问题描述】：

 <content>
            <ScrollContainer width="100%" horizontal="true" vertical="true" focusable="true">
            	<HBox id="idHBox"  width="99.9%"/>
            </ScrollContainer>
        </content>

这是我在 XML 站点中的代码，HBox 是一个父元素，包括一个 SVG 元素但问题是它只显示垂直滚动条而不显示水平滚动条

【问题讨论】：

标签： javascript xml sapui5

【解决方案1】：

图片的绝对大小是多少？

这是一个小例子。

如果更改图像宽度，水平滚动条会出现/消失（例如宽度：“100%”）

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m" 
            data-sap-ui-theme="sap_belize"></script>
        <script>
            var app = new sap.m.App();
            var oImage = new sap.m.Image({
                width: "3000px",
                height: "300px",
                src:"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/alphachannel.svg"        
            });
            
            var oHbox = new sap.m.HBox({
                width: "100%",
                items : [oImage]
            });
            
            var oScroll1 = new sap.m.ScrollContainer({
                width:"100%",
                focusable:true,
                vertical:true,
                horizontal:true,
                content : [oHbox]
            });

            var page = new sap.m.Page({
                content : [oScroll1]
            });
            
            app.addPage(page);
            app.placeAt('content')
        </script>
    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>

【讨论】：