Is there a way to synchronize scrolling between two divs? I have a situation where one div is larger than the other, and I want them both to scroll together.
Any suggestions?
.content {
width: 100%;
}
.left {
background-color: yellow;
width: 50%;
float: left;
max-height: 200px;
}
.right {
background-color: green;
width: 50%;
float: left;
max-height: 200px;
overflow: hidden;
overflow-y: scroll;
}
Are you looking to simultaneously scroll two divs?
Adjust your CSS like this:
.content {
width: 100%;
max-height: 200px;
overflow-y: scroll;
}
.left{
background-color: yellow;
width: 50%;
float: left;
}
.right{
background-color: green;
width: 50%;
float: left;
}
Take a look at this demonstration: https://jsfiddle.net/fhq2kmvb/12/
Spent 5 whole hours grappling with this problem.
I encountered a similar issue where I needed to overlap elements and allow scrolling at the same time.
.content {
position: "relative";
overflow: "auto";
}
.below{
font-family: "Courier New", Courier, monospace;
background-color: yellow;
position: absolute;
top: 0px;
z-index: -1;
/* width: 100%; */
}
.above{
font-family: "Courier New", Courier, monospace;
position: absolute;
background-color: transparent;
top: 0px;
z-index: 1;
/* width: 120%; */
}
https://codepen.io/manoharreddyporeddy/pen/XWmpYQL
I hope this solution proves helpful to you as well.
Perhaps this code snippet could be a helpful starting point for you
code
$('.left').scroll(function () {
$('.right').scrollTop($(this).scrollTop());
});
styles
.content {
width: 100%;
}
.left{
background-color: yellow;
width: 50%;
max-height: 200px;
float: left;
overflow: hidden;
overflow-y: scroll;
}
.right{
background-color: green;
width: 50%;
max-height: 200px;
float: left;
overflow: hidden;
overflow-y: scroll;
}
My code had a <div> with a child component named SocialPostwithCSS, and when onClick was triggered, it would hide the div, set the state to editing: true, and display a <textarea>. I used this.textarea.focus with a ref={(input)=>{this.textar ...
I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...
Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...
Take a look at this snippet of my HTML: <section ng-controller="GalleryController as gallery"> <nav footer-directive></nav> </section> This is the GalleryController I'm using: angular .module('myapp') ...
Whenever I try to utilize my popup page for a chromium extension as a conduit for communication between the background page and a page shown within an iframe on the popup, I encounter the following error. I required a sandboxed environment to execute Vue.j ...
My project involves creating an Instagram-clone with like and dislike buttons. When a user is logged in and hasn't liked or disliked a post yet, both buttons appear as black. If the user likes a post, the like button turns blue, and if they click disl ...
I need assistance. I have a table that holds user data and I want to create a functionality where clicking on the edit button opens a dialogue box with a form pre-filled with the user's initial data. However, I'm currently only able to pass the u ...
How can I retrieve the inner HTML of the selected option from a dropdown instead of its value? In the example, I am looking to extract 'CO'. Despite that alert($('#mydropdown').val()); returning 1, I'm interested in the actual text ...
<template> <div> <div style="height: 20px; color: yellow"> test </div> <v-card class="markdown-preview" tile> <v-card-text v-html="previewText"> </v-card-text> ...
When I add a package manually to my package.json file and run npm install, the dependencies of that new package are updated in my package-lock.json. However, if I then delete that package from package.json and run npm install, the dependencies of that pac ...
Currently, I am facing an issue with my React app in VS Code. My goal is to assign a distinct background color to each component. However, the problem arises when unwanted CSS styles from other files start affecting components even though they are not impo ...
Currently, I am utilizing CF7 to gather user input and allow them to upload an image file. My goal is to showcase the uploaded image file on the screen before the submit button is clicked. After uploading, I can view the file name on the screen. However, ...
I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...
Having an issue with adding an extra empty row when using the header slot in v-data-table from Vuetify2. Check out the codepen here: https://codepen.io/satishvarada/pen/rNBjMjE?editors=1010 Vue.component('pivot-table',{ data:()=>({ ...
Our team is currently in the process of creating a customized template for our eBay listings. eBay provides users with the option to upload a description as HTML code and allows the code to link external CSS files. When uploading HTML code on eBay, it ap ...
When looping over the JSON data returned from Flickr, I expected to alert 0, 1, 2, 3... for the index. However, it is actually alerting id, server, farm, etc. $.each(data.photo, function(index,item){ alert(index); }); UPDATE: By the way, I am utiliz ...
Looking to accomplish a simple task: $('#addform').html(donedata); The element #addform is a <div> and donedata is a variable. However, this code isn't working and I have a theory as to why. Essentially, I am trying to manipulate a d ...
I am utilizing a useQuery hook to send a request to a graphql endpoint in my react.js and next.js project. The purpose of this request is to display a list of projects on my website. Upon inspecting the network tab in the Chrome browser, the request appear ...
I'm trying to update a JSON file without using an array with FS. The desired format of the file should be: { "roll.705479898579337276.welcomemessage": "There is a welcome message here", "roll.726740361279438902.welcome ...
I've been attempting to design a unique layout with a pentagon-shaped div, however, I'm encountering some challenges. Despite using SVG for the shape, it does not display correctly in Firefox. Additionally, I need the div to be responsive and sca ...