What is the best way to decrease the scrollable height of a div containing scaled content?

I'm encountering an issue with a scrollable div that I scale using css3 transform. When zooming in, the content scales up properly, but when zooming out below 100%, the vertical scrolling capability of the container div remains unchanged.

To better illustrate this problem, I've created a jsfiddle example

CSS:

.scrollable
{
    height: 250px;
    width: 250px;
    overflow: auto;
    background-color: green;
}

.content
{
    height :500px;
    width : 500px;
    background: linear-gradient(red, blue);
    ...
}

JS/jquery:

function scaleContent(newScale){
    var $content = $("#content");
    var scaleString = "scale("+newScale+")";
    //var height = (newScale<1)? $("#content").height()/scale*newScale : originalHeight;
    $content.css({
    '-webkit-transform' : scaleString,
    '-webkit-transform-origin' : '0 0',
    ...
    //'height' : height +'px'
    });
    scale=newScale;
}

The horizontal scrolling works correctly after scaling, but the vertical scrolling does not adjust below 100% scale.

It may appear that the vertical scrolling changes on the first zoom out, but it's just due to the removal of the horizontal scrollbar.

I attempted to manually adjust the height of the content element, but it caused issues with the dimensions of the content itself.

The ellipses indicate areas where code repetitions exist for compatibility with different browsers.

javascripthtmlcssscrolltransform

Answer №1

I have devised a solution that may not be optimal. I created an additional div around the content, referred to as the view wrapper. Its overflow is set to "hidden" and its width and height are manually adjusted to match the scaled content.

CSS:

.viewwrapper{
    height: 500px;
    width: 500px;
    overflow: hidden
}

JS:

function adjustScaling(newScale){
    var $content = $("#content");
    var scaleValue = "scale(" + newScale + ")";
    var $viewwrapper = $("#viewwrapper");
    var dynamicHeight = $content.height() / newScale;
    var dynamicWidth = $content.width() / newScale;
    $viewwrapper.height(dynamicHeight);
    $viewwrapper.width(dynamicWidth);
    $content.css({
        '-webkit-transform': scaleValue,
        '-webkit-transform-origin': '0 0',
    ...
    });
}

View JS Fiddle

Update:

If you are using jQuery 3.0 or 3.1, the behavior of the height and width functions has changed, resulting in returning scaled values. To adapt the code for these versions, simply modify as follows:

function adjustScaling(newScale){
    var $content = $("#content");
    var scaleValue = "scale(" + newScale + ")";
    var $viewwrapper = $("#viewwrapper");
    $viewwrapper.height($content.height());
    $viewwrapper.width($content.width());
    $content.css({
        '-webkit-transform': scaleValue,
        '-webkit-transform-origin': '0 0',
    ...
    });
}

View JSFiddle using jQuery 3.0

Note that this adjustment might not carry over to future jQuery versions.

Update 2: In Chrome, there may be unwanted scrollbars when zooming out of the content due to a known Chrome bug.

Answer №2

When applying transformations to your #content div, it is important to also consider the outer div, #scrollable, which has a fixed height and may not adjust accordingly. Make sure to apply transformations to both elements for consistent resizing.

If you zoom in, the outer div should adapt to the inner content, but if you reduce the size, it may not automatically adjust. Be mindful of this when making changes.

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

Should information be retrieved from the server or the client side?

Allow me to clarify the situation at hand. I am currently developing a website where users can store movie information, sourced from a third-party API known as The Movie Database. At this juncture, my main concern pertains to optimizing performance throu ...

javascriptnode.jsfetch-api

Trouble with fetching data in Backbone

I'm facing an issue where the Backbone/Marionette Controller and Collection are not fetching properly. define(["jquery", "backbone","models/Poi"], function($, Backbone, Poi) { // Creating a new instance of Backbone Poi class object ...

javascriptjqueryajaxbackbone.jsmarionette

The background color feature of a div is malfunctioning

I have encountered a strange issue with one of my Div elements. When I add text inside the div, the background color sticks to the text. However, if there is no text present, the background color disappears. Image with Text: https://i.stack.imgur.com/oYK ...

htmlcss

Join together a pair of php variables

I am currently extracting text and color values from a form structured like this: Here are the codes in management.php: <form method="post" action=""> <input type="color" name="color"> <input type="text" name="text"> <input ...

phphtml

What is the best way to specify a finite set with precisely 5 elements in TypeScript?

I'm currently working on creating a custom type in TypeScript that represents a finite set using various other types, such as exactly 5 values (note: it's not an enum). For instance: Colors = {RED, BLUE, GREEN, YELLOW, ORANGE} ...

javascripttypescripttypes

What exactly does jQuery.Class entail?

I am curious about the purpose of the code snippet below: jQuery.Class("Vtiger_Helper_Js",{ }); I am asking because I am having trouble understanding the function of jQuery.Class... ...

javascriptjqueryvtiger

html demonstrates the outcome prior to ng-if assessing the regex in angularjs

<div class="alert alert-danger hidden-xs" role="alert" ng-if="OrderDetails.length == 0" style="font-size: large; font-stretch: expanded; font-weight: bold;"> <p>We apologize, but currently there are no details for your last order. Howeve ...

javascriptangularjs

Button Click Does Not Trigger Bootstrap Modal Display

This is a sample Bootstrap document that includes JS and CSS files to display a list properly in Bootstrap. However, the Modal does not appear when clicking on Launch demo modal. No JavaScript errors are displayed in the Console. Can you help troubleshoot ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Tips for displaying an array within a table data cell during a while loop

I've encountered this code snippet: $result7 = mysqli_query($conn, $sql7); $resalm = mysqli_query($conn, $contalm); $p = array(); while($row_alm = mysqli_fetch_array($resalm)) { $p[] = $row_alm['nome']; } while($rows_cursos7 = mysqli_fet ...

phphtmlarrays

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

javascriptjqueryhtmlcss

HTML5 format for credit card expiration date (MM/YY)

I've been attempting to create a regular expression pattern for credit card expiration date input that will produce the format mm/yy So far, I have come across a pattern that uses the format yyyy-mm-dd, as shown below: <input type="text" pattern= ...

regexhtmlformsinput

A guide on configuring .env variables when importing a module or setting up configurations

I need to include a .env file in my application. I have created two files for this purpose (one module and one service): config.module.ts import {Module} from '@nestjs/common'; import {ConfigService} from './config.service'; @Module ...

javascriptnode.jstypescriptdependency-injectionnestjs

Tips for using the .join() method in React when the array is not initially present

I'm currently working on a functional React component that retrieves data from an API request and displays it. The object initially is empty until the request is made. Inside the object, there is an array structured like this: ['US', ' ...

javascriptreactjsecmascript-6

When using JSON.stringify, the parameter sent to the ASP.NET MVC Controller is found to be null

My current task involves fetching information through an MVC controller by sending a JSON object as a parameter. The method within the controller looks like this: public ActionResult GetLatestInfoLogs(InfoLogUserJson invoker, InfoLogUserJson affected) { ...

javascriptasp.netajaxasp.net-mvcjson

Creating a hyperlink that directs users to a different URL than its preset destination

I am trying to dynamically add the link text to the URL and trigger the opening of a new URL with the added query string when clicking on the original link. How can I achieve this using javascript or jQuery? <a href="www.mysite.com/search.aspx?kwd=" ...

javascriptjqueryhyperlinkquery-string

Access to JS property denied

Here is the JSON data I have: [ { "_id": { "$oid": "560c079e1691682b4ff327ad" }, "year": "2015", "month": "9", "day": "30", "time": "17:02:17", "problemDesc": "test", "resolut ...

javascriptjson

What is the best way to use multiple transparent images as backgrounds on a website using HTML?

This is the current background settings: <html> <head> <title></title> </head> <body style="background: #5d5d5d url(images/tile_dark.png); border: 20px solid #00c09e; ...

htmlcss

javascript highlight text within quotes

By incorporating a handy plugin into my application, users can now easily search for specific text and have it highlighted: Check out the Johann Burkard Text Highlighting Plugin here! I've managed to make this work for highlighting a single text str ...

javascriptjqueryhighlighting

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

Emails not being sent by Nodemailer

I recently configured my glitch project with a contact form and I'm attempting to set it up so that it sends me an email when someone fills out the form. The issue I'm experiencing is that while the server console logs indicate that the message h ...

javascriptnode.jsnodemailer