$(window).scroll event does not fire

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Harald Schneider

I tried to implement some kind of elevator button, which allows the user to scroll back to top at the end of long lists or texts. The button should appear automatically after the user scrolled e.g. 100px downwards and disappear, if the list has reached its top again.

Example here: https://codepen.io/rdallaire/pen/apoyx

However, it looks like Angular supresses the scroll event: https://stackoverflow.com/questions/33600605/window-scroll-not-working-in-augular-controller

Do you see any chance to get this working? Or maybe add a custom control for this functionality?

DecSoft

Hello Harald,

Probably what happen is that we must adapt the code to our app. For example, copy the below text and save it as a file named "TopLink.ab". Open that file with App Builder and run the app. As you can see, there is no problem to use the code that you wanted (or better said, to get the results that you wanted) using an HTML control, for example. I am not sure, however, if you wanted something like this or other thing.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.28">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-03T14:01:48.472</Created>
    <Modified>2019-04-03T14:17:10.146</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <InlineCSS>
      <![CDATA[#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS
  $('#HtmlContent1').scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
  });

  $('#return-to-top').click(function() {      // When arrow is clicked
    $('#HtmlContent1').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
  });
EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>464</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus nunc. Duis sit amet finibus sem, in auctor mauris. Donec commodo orci in egestas laoreet. Pellentesque posuere velit quis urna pellentesque, et blandit orci sagittis. Pellentesque sed magna congue, cursus mauris quis, venenatis enim. Phasellus ut porta arcu. Duis faucibus eu orci in tempor. Ut a tellus ac urna elementum convallis eu vel arcu. Nulla vulputate est in lectus gravida, in dignissim purus fermentum. Pellentesque elit turpis, sollicitudin non leo at, faucibus lacinia felis. Quisque dignissim eleifend lectus nec lobortis. Proin porta urna eu justo interdum dignissim. Nullam aliquet lacinia sapien, ut fringilla justo sagittis a. Duis ornare nisl nec lacus rhoncus ultrices.
</p>
<p>
Fusce porta orci ut ex tempor accumsan. Pellentesque mauris nulla, tincidunt vitae lectus eu, imperdiet venenatis lorem. Quisque in mauris ligula. In nisi velit, blandit non ultrices id, varius quis nibh. Quisque turpis risus, congue at nisi eu, posuere laoreet ligula. Phasellus fermentum lectus sit amet massa tristique, maximus mattis felis cursus. Duis congue, mauris non aliquet placerat, ex dui iaculis nunc, laoreet sagittis lectus metus at neque. Praesent mattis sed urna at pellentesque. In consequat suscipit ex, sit amet tempor felis dapibus sed. Morbi diam enim, dictum id pharetra a, imperdiet sit amet lectus. Curabitur nec dui tristique, vulputate turpis id, sodales elit. Praesent mi nisl, sodales placerat magna vitae, auctor interdum metus. Praesent sed molestie sapien, quis luctus ligula. Curabitur ac efficitur nulla. Curabitur convallis ante arcu, ut tempus lectus gravida sed.
</p>

<span id="return-to-top"><i class="fas fa-arrow-circle-up"></i></span>
]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.28 (4/1/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

The CSS code has been placed in the app's Inline CSS option. The Javascript (adapted) has been placed in the app's view Show event. Below is what you must see when run the app:

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello Harald,

Here is another sample, this time scrolling the app's view itself, not an specific HTML Content control. Instead of refer to "window", we refer to ".appView", which is a class that all the views have. Take a look at the same parts than in the above sample.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.28">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-03T14:01:48.472</Created>
    <Modified>2019-04-03T14:48:57.623</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <InlineCSS>
      <![CDATA[#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    z-index: 99999;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  $('.appView').append('<span id="return-to-top"><i class="fas fa-arrow-circle-up"></i></span>');

  $('.appView').scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
  });

  $('#return-to-top').click(function() {      // When arrow is clicked
    $('.appView').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
  });
EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="3001">
          <Name>Input1</Name>
          <Top>40</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input2</Name>
          <Top>88</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input3</Name>
          <Top>136</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input4</Name>
          <Top>184</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input5</Name>
          <Top>232</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input6</Name>
          <Top>280</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input7</Name>
          <Top>328</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input8</Name>
          <Top>376</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input9</Name>
          <Top>424</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input10</Name>
          <Top>472</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input11</Name>
          <Top>520</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input22</Name>
          <Top>568</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input23</Name>
          <Top>616</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="2001">
          <Name>Button19</Name>
          <Top>664</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Button1]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
        </Control>
        <Control Role="6002">
          <Name>Label1</Name>
          <Top>11</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>24</Height>
          <Text>Scrollable inputs</Text>
        </Control>
        <Control Role="1001">
          <Name>PaddingBottomContainer</Name>
          <Top>712</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>16</Height>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.28 (4/1/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Here is how this sample look:

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Perfect! You saved my day :-) Thank you!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.