a4 size div scrolling top issue based on scale value

ghz 8months ago ⋅ 101 views

i using a div with a4-size dimensions , i need a4 div vertically and horizontally on center of page , if scale value is less it is working fine , but if scale value is more than one i am unable to scroll to the top , and text inside a4 div is not visible , can any please give the solution

Thanks in advance

  let scale = 1;

  function zoomIn() {
    scale += 0.1;
    updateZoom();
  }

  function zoomOut() {
    if (scale > 0.2) { // Limiting minimum zoom level
      scale -= 0.1;
      updateZoom();
    }
  }

  function updateZoom() {
    document.getElementById("a4Div").style.transform = "scale(" + scale + ")";
    document.getElementById("letterContent").style.fontSize = (100 / scale) + "%";
  }
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  
  #a4Div {
    width: 210mm; /* A4 paper width */
    height: 297mm; /* A4 paper height */
    background-color: white;
    border: 1px solid #333;
    position: relative;
    overflow: hidden; /* Ensures content stays within A4 div */
  }
  
  #letterContent {
    padding: 20px;
    transform-origin: top left; /* Adjust scaling from top-left corner */
  }
  
  #zoomControls {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
<div id="a4Div">
  <div id="letterContent">
    <h1>Zoomable A4 Letter</h1>
    <p>This is a sample letter content. You can zoom in and zoom out using the buttons below.</p>
  </div>
  
  <div id="zoomControls">
    <button onclick="zoomIn()">Zoom In</button>
    <button onclick="zoomOut()">Zoom Out</button>
  </div>
</div>

Answers

To address the issue where the text inside the A4-sized div becomes invisible when the scale value is increased, and to allow scrolling to the top of the page when the scale value is more than one, you can make the following adjustments:

  1. Ensure that the transformed content inside the #a4Div remains visible even when the scale is increased beyond 1. To achieve this, you can set overflow: visible for #a4Div.
  2. Adjust the positioning of the zoom controls so that they are not affected by the scaling transformation.

Here's the modified CSS and HTML:

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

#a4Div {
  width: 210mm; /* A4 paper width */
  height: 297mm; /* A4 paper height */
  background-color: white;
  border: 1px solid #333;
  position: relative;
  overflow: visible; /* Allow content overflow */
}

#letterContent {
  padding: 20px;
  transform-origin: top left; /* Adjust scaling from top-left corner */
}

#zoomControls {
  position: fixed; /* Fixed position for zoom controls */
  top: 10px; /* Adjust top position as needed */
  right: 10px; /* Adjust right position as needed */
  z-index: 1; /* Ensure controls appear on top of the content */
}

<div id="a4Div">
  <div id="letterContent">
    <h1>Zoomable A4 Letter</h1>
    <p>This is a sample letter content. You can zoom in and zoom out using the buttons below.</p>
  </div>
</div>

<div id="zoomControls">
  <button onclick="zoomIn()">Zoom In</button>
  <button onclick="zoomOut()">Zoom Out</button>
</div>

With these adjustments, you should be able to scroll to the top of the page even when the scale value is more than one, and the text inside the A4-sized div should remain visible regardless of the scale value.

#css