Skip to content

Instantly share code, notes, and snippets.

@dennisseah
Last active April 26, 2020 17:05
Show Gist options
  • Save dennisseah/a87622b8ba91d0f17c2b to your computer and use it in GitHub Desktop.
Save dennisseah/a87622b8ba91d0f17c2b to your computer and use it in GitHub Desktop.
SAPUI5: fire event when scrolling on sap.m.ScrollContainer
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script>
$(function() {
sap.m.ScrollContainer.extend('ScollContainerEx', {
metadata: {
events: {
scroll: {}
}
},
renderer: function(oRm, oControl) {
sap.m.ScrollContainerRenderer.render(oRm, oControl);
},
onAfterRendering : function() {
if (sap.m.ScrollContainer.prototype.onAfterRendering) {
sap.m.ScrollContainer.prototype.onAfterRendering.apply(this, arguments);
}
var that = this;
this.$().scroll(function() {
that.fireScroll({top: $(this).scrollTop(), left: $(this).scrollLeft()});
});
}
});
var items = [];
for (var i = 0; i < 100; i++) {
items.push(new sap.m.Input({value: 'hello' + i}));
}
var container = new ScollContainerEx({
height: '600px',
content: items,
vertical: true,
scroll: function(e) {
sap.m.MessageToast.show(JSON.stringify(e.getParameters()));
}
});
container.placeAt('content');
})
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment