Issue with scrollHeight in Vue.js component

I am currently using Vue and have a div tag styled with CSS

var max_pages = 100;
var page_count = 0;

function snipMe(el) {

  page_count++;
  if (page_count > max_pages) {
    return;
  }
  var h = parseInt(window.getComputedStyle(this, null).getPropertyValue('height'));
  
  var lng = this.scrollHeight - Math.ceil(h);
  var children = this.children;
  
  var removed = [];
  
  while (lng > 0 && this.scrollHeight > 1123 && children.length > 0) {
    
    var child = children.item(children.length-1);
    
    child.parentElement.removeChild(child);
    removed.unshift(child);
    
    lng = this.scrollHeight - Math.ceil(h);
    
  }

  if (removed.length > 0) {
    
    var f4 = document.createElement("div"); 
    
    f4.className = "F4";
    
    for(var i = 0; i < removed.length; i++)
    {
        f4.appendChild(removed[i]);
    }
    
    this.after(f4);
    
    snipMe.call(f4);
    
  }
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
ready(() => {
  document.querySelectorAll('.F4').forEach(element => {
  snipMe.call(element);
  });
  
});
.F4 {
  background: white;
  width: 5cm;
  height: 9cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
  font-size: 12pt;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  size: F4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .F4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}
<div class="F4">
  <h1>
    Title
  </h1>
  <p> 1Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>2 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>3 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <h1>
    Hey you!
  </h1>
  <p>4 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean f ermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>5 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>

and I would like to determine the scrollHeight of this tag. When I use

document.querySelector('#div').scrollHeight

this returns the default height of the div (340px) instead of the scrollHeight value of 780px. This code functions correctly when served independently, but does not work within Vue.js. What could be causing this issue? Is there an override happening in Vue?

Answer №1

It's clear that using this.scrollHeight is not providing the accurate result. Instead, make sure to utilize el.scrollHeight within the snipMe() function for obtaining the correct scroll height of the Div.

The below code snippet will fetch the precise F4 Div height and display it at the top of the HTML page.

new Vue({
  el: '#app',
  data: {
    containerScrollHeight : 0
  },
  mounted() {
    document.querySelectorAll('.F4').forEach(element => {
      this.snipMe(element);
    });
  },
  methods: {
    snipMe(el) {
      // In order to obtain the container scroll height, use el.scrollHeight
      this.containerScrollHeight = el.scrollHeight;
    }
  }
})
.F4 {
  background: white;
  width: 5cm;
  height: 9cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
  font-size: 12pt;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  size: F4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .F4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h4>The container's scroll height: {{containerScrollHeight}}</h4>
  <div class="F4">
    <h1>
      Title
    </h1>
    <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur nulla sed imperdiet tristique. Integer nec purus auctor, accumsan diam ac, cursus quam.</p>
    <p>2 Nulla facilisi. Suspendisse potenti. Sed non ultricies est. Aenean lobortis velit vitae justo rhoncus, sed rutrum enim vestibulum.</p>
    <p>3 Fusce metus leo, tincidunt in tempor eget, tincidunt eu ipsum. Nulla vel nisi ut tortor tempus dignissim sit amet et libero.</p>
    <h1>
      Hey there!
    </h1>
    <p>4 Morbi quis aliquet sem. Nam elementum, dui non feugiat consequat, odio mi suscipit felis, in malesuada sapien ante eget nunc.</p>
    <p>5 Duis vehicula pulvinar neque sit amet laoreet. Curabitur mattis erat mauris, a varius magna condimentum a.</p>
  </div>
</div>

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

What is the true functionality of the Bootstrap Grid system?

I am currently in the process of grasping how this functions. As an example, I have created columns and inserted <hr> for visualization purposes. This is what I have attempted thus far: I adjusted the row's margin to be -15px on both sides. C ...

Mastering the art of applying and eliminating classes in AngularJS

Is it possible to adjust the size of the table by clicking a button on the side navigation bar? When the button is clicked, the table width should expand to maximum. <table init-table="rowCollection" class="table table-striped table-responsive table-ho ...

What steps can be taken to avoid special characters in ion-input fields?

When inputting special characters into the field used for storing the alphanumeric serial number, they are accepted. I need to prevent special characters from being entered in the input field. <ion-input [(ngModel)]="serial_number" (ngModelCha ...

Problem with displaying requests at the endpoint on the Express Router

I'm currently delving into the world of express and experimenting with express.Router() to route to various endpoints. Despite following online tutorials diligently, I am only able to successfully send text from the root '/' endpoint and not ...

Mysterious data organization - transform into an object

As I interact with an API, there is a value that I cannot quite pinpoint. My goal is to transform this string into a JavaScript object, but the process seems complex and confusing. Does anyone have insight on what this data represents and how it can be co ...

What is the method for obtaining distinct hover-over values for individual items within a dropdown menu?

If utilizing angular2-multiselect-drop down, what is the correct method to obtain distinct hover over values for individual items in the drop down? When dealing with standard HTML, you can directly access each element of the drop down list if it's ha ...

What exactly is the significance of the error message "The JSX element type 'Header' does not have any construct or call signatures"?

I am encountering an error in my code, specifically with the Header and List elements. The error message keeps stating that the JSX element type Header does not have any construct... What could be causing this issue? import React, { useEffect, useState } ...

Maintain the execution of a Node.js function without reliance on any front-end calls

Looking to continuously generate random data in MongoDB using my NodeJS API without making calls from the client-side. var autoCreate = function(){ var randomNumb = (Math.random()* (10-0) + 0).toFixed(0); var randomThing = randomstring.generate({ ...

Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...

How to implement Vue.js template into a different HTML document

I have successfully designed a template using vue.js. Now, I am seeking to utilize this template in another HTML file by referencing its template Id. For example, <div id="widgetId"></div> The template Id is labeled as widgetId. In this scen ...

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

Tips for designing interactive tooltips for images

Are there any alternative methods for adding multiple tooltips on top of an image in a more elegant way, without relying on image maps? Ideally, a solution involving jQuery would be great, but not essential. I am aware that image maps can be used for this ...

Find and return a specific record from MongoDB if it matches the exact value

model.js import mongoose from 'mongoose'; const { Schema, Types } = mongoose; const participants = { user_id: Types.ObjectId(), isAdmin: Boolean } const groupSchema = new Schema({ id: Types.ObjectId(), // String is shorthand for {type: St ...

Display the current date in a formatted way using Angular 2

I am struggling with displaying the current date in the format I desire. The code snippet I currently have is: this.whatTime = Observable.interval(1000).map(x => new Date()).share(); When I use this code in my template like so: {{whatTime | async}} ...

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

The addClass() method in jQuery does not seem to be working as it fails to add the

The code is functioning properly, generating all the necessary elements as expected. However, I am encountering an issue with the jquery addClass method not applying the class. As a beginner in utilizing jquery methods within a javascript function, any g ...

Executing prototype functions after a function has been defined

I'm looking to expand my knowledge on JavaScript prototypes. I came across some NodeJS modules where functions were being called in a chain like this: something.funcA().funcB().funcC(); and I want to implement something similar. How can I achieve this ...