Troubleshooting: Scroll event malfunction in framework7 with Vue framework

Currently implementing framework7 in my project and facing an issue where I want a button to start floating after the user scrolls past a specific element.


I have tried various methods to trigger the scroll event but none seem to be working. Even attempted using a native event listener without success.

This is the code snippet from my component:

 export default {
    methods: {
    handleScroll(event) {
      alert('should work')
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.handleScroll;
    var element = document.querySelector(".similar-adventures");
    var top = element.offsetTop;
    window.scrollTo(0, top);
  }
}

And here is the code for the native event listener:

  window.addEventListener(‘scroll’, function(e){

     // Get the new Value
     newValue = window.pageYOffset;

     //Subtract the two and conclude
     if(oldValue - newValue < 0){
         console.log(“Up”);
     } else if(oldValue - newValue > 0){
         console.log(“Down”);
     }

     // Update the old value
     oldValue = newValue;
  });

Answer №1

Even though this information may be considered outdated, I am providing an answer for the sake of future reference. The issue at hand seems to involve the window not actually scrolling due to framework7 utilizing pages/views. In Vue, the code renders to 2 divs as shown below:

<f7-page>
  <div slot="fixed">Fixed element</div>
  <p>Page content goes here</p>
</f7-page>

<!-- Renders to: -->

<div class="page">
  <div>Fixed element</div>
  <div class="page-content">
    <p>Page content goes here</p>
  </div>
</div>

I have discovered that the page-content class is where you should attach the eventListener. The recommended way to achieve this is using Dom7 as demonstrated below:

 let page = $$('.page-content')

  page.on('scroll', () => {
    console.log(page.scrollTop()) // will display the page's top position
    page.scrollTop(0) // will scroll to the top
  })

// If dealing with multiple pages:

  let pages = $$('.page-content')
  let home = $$(pages[0])
  let about = $$(pages[1])

  pages.on('scroll', () => {
     console.log(home.scrollTop()) // displays the home page's top position
     console.log(about.scrollTop()) // shows the about page's top position
  })

  // Additional options 

  page.scrollTop(position, duration, callback)
  page.scrollTo(left, top, duration, callback)

Just don't forget to import $$ from 'Dom7'

Answer №2

This script fetches all the pages associated with the f7 component and stores them in an array

const pages = document.querySelectorAll('.page-content');

To enable scrolling for a page, target the specific index and execute the following:

pages[0].addEventListener('scroll', function () { console.log('is scrolling...') } );

If you prefer a more elegant approach where you do not have to specify the page by index:

Assign an id attribute to your f7-page element

<f7-page name="whatever" id='myPage'>

Subsequently, include this code example within the mounted event:

const f7page = document.getElementById('myPage');
const scrollableDiv = f7page.querySelector('.page-content');
scrollableDiv.addEventListener('scroll', function () { console.log('is scrolling...') } );

Kudos to BiscuitmanZ's input for identifying the root cause of the problem

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to prevent camera motion in three.js when the escape key and directional keys are activated?

While working on my project with Pointer Lock Controls, I came across a bug. When the player is pressing any directional keys on the keyboard and simultaneously presses the escape button to turn off the Pointer Lock Controls, the camera continues to move ...

Transforming substantial quantities of data into a string array in JavaScript

I have around 2000 items of data that I work with on a regular basis in Visual Studio Code. Is there a way to convert this data into a string array without having to manually add quotes around each item using JavaScript? var array = [ a2kjda a2dkj ...

Using Angular Directive to create a customized TreeView

Although I am still relatively new to Angular, I need to make some modifications to a treeview directive that I found on NgModules. The existing code looks promising, but I want to customize it to include the ability to add, delete, or modify items. You c ...

The Vue component fails to respond to updates in plugin data

I am currently working on implementing a feature where a component reacts to data changes in a custom Vue plugin. To achieve this, the plugin creates a new instance of a Vue object in its constructor: this._vm = new Vue({ data: { obj: null, stat ...

Creating visual content on Canvas using JavaScript

Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm missing? Thanks CSS .positionCanvas{ position: absolute; left:0; righ ...

Determine whether a nullable string property contains a specific string using indexOf or includes may result in an expression error

I am facing a challenge where I need to assign a value conditionally to a const. The task involves checking if a nullable string property in an object contains another nullable string property. Depending on the result of this check, I will then assign the ...

Using PHP to track the number of clicks on a specific div element

Although I am not well-versed in javascript, I have incorporated it into my website to enhance its appearance. One of the features I've added is a popup that appears when a user clicks on a specific div element to display additional information. In ad ...

What is causing console.log to not work in Vue.js?

Environment $ node -v v8.16.2 $ npm -v 6.4.1 "vue": { "version": "2.5.16", "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz", "integrity": "sha512-..." }, "nuxt": { "version": "1.4.1", "resolv ...

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

Can you specify the type of props that are typically passed in the setup function in Vue 3?

I have a question about using a render function inside a setup function. Specifically, I am curious about the type of props within the scope of setup. import { h, PropType } from 'vue' export default { props: { brand: { ty ...

Combine the array elements by date in Angular, ensuring no duplicates are present

How can array data be merged based on the date while avoiding duplicates? See the code snippet below: [ { date: [ '2019-12-02 08:00:00', '2019-12-03 08:00:00' ], upload:["47.93", "47.46", "47.40", "47.29" ], download: ["43.90", ...

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Here is an array of vehicles with their details. export const fetchDataFromApi = () => { return [ { vehicleId: 1, vehicleType: 'car', seats: 4, wheelType: 'summer', updatedAt: new Date().toISOString }, { vehicleId: 2, vehic ...

Ensuring your API server is always online: Tips and tricks

As part of my university assignment, I am developing a COVID-19 dashboard. Recently, the government decided to make COVID data publicly available in my country. Fortunately, I stumbled upon a NodeJS self-hosted RESTful API server endpoint that provides the ...

Updating a specific row in a multiple row form can be achieved when the input field names match in a column

My task involves working with a report that generates a form in input mode. This form contains multiple rows of data, each row consisting of a button and an input field. The input field name remains consistent across all rows for easier processing by the C ...

Unable to start store from localStorage during App initialization

Having trouble setting up my Vuex store with the logged-in user's account details from localStorage. I've looked at numerous Auth examples in Nuxt, but none explain how to retrieve an authToken from localStorage on the client side for subsequent ...

JavaScript code to automatically navigate to the HomeScreen when an alert window is closed

After triggering a JavaScript alert, is there a way to automatically navigate to the home screen once the alert is closed? I want users to be redirected to the Home Screen when they press the close button on the alert. Is there a way to achieve this beha ...

Dynamic stretching effects while scrolling using JavaScript and CSS

Wondering if there are any JavaScript libraries or functions that can add an elastic/rubber band effect to specific elements when scrolling. For example, when scrolling quickly and then stopping suddenly, these elements would move out of place briefly befo ...

Tips for enhancing JavaScript efficiency and minimizing page load on a website containing extensive HTML content

We are currently facing a challenge with our page layout which includes a large number of HTML elements (thousands of DIVs) that have jQuery click handlers attached to them. The structure of the layout is as follows: Our Navbar consists of over 2000 DIVs ...

The v-model for two-way binding seems to be malfunctioning, with a browser error or warning stating that the use of withDirectives is restricted to render functions

Currently utilizing VITE v5.0.8. This file is dex.html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content=&q ...