Ways to adjust the scroll position of a div containing an overflowing div within it

In my simple HTML document, I have the code below:

<div id="doublescroll_projects">
  <div class="project_icons">
    <div id="project" class="project_1"></div>
    <div id="project" class="project_2"></div>
    <div id="project" class="project_3"></div>
  </div>
</div>

Additionally, I have the following CSS:

#doublescroll_projects {
   position:absolute;
     bottom:0px;
     right:0px;

   overflow:auto;
   width:900px;
   height:500px;
 }
    .project_icons {
       width:1500px;
       max-height:2000px;
 }

#project {
    height:240px;
    width:360px;
    float:left;
    margin:50px 55px 55px 50px;
}

The class project_icons enables the div doublescroll_projects to be scrollable in both directions. My objective is to have the scroll position set to be halfway vertically and halfway horizontally when the page loads.

I've researched various solutions for setting the scrollbar position, but none have been successful for me. I would appreciate any guidance on achieving this effect during page load.

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

leveraging embedded jetty for developing a web-based interface

As a newcomer to web development and using embedded Jetty, I have created the source code below in Eclipse IDE. I need to programmatically start the Jetty server and cannot use the command line to do so. The web interface must be lightweight due to the li ...

A guide to extracting data from HTML tables using Python for web scraping and exporting the results to

My Python skills are still pretty basic, but I'm working on creating a web scraping tool to extract data from an HTML table online and save it into a CSV file with the same structure. Here's an example of the HTML table (I'll show just a fe ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

flexible design using flexbox with image overflow and responsive footer

I created a website and utilized flexbox for designing the layout. The page structure is quite simple, consisting of only 3 tags: <header> <section> <footer> [index.html] <html> <head> <link rel="stylesheet" type="t ...

descend bubble events bespoke

When dealing with events, they typically only bubble up. However, there may be a situation where a custom event needs to be triggered on a parent element and activate all the handlers on its children if they have a listener attached. How can this be achi ...

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: https://i.sstatic.net/suIVu.png However, I haven't been able to achieve the desired result with the following code: &l ...

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

Leveraging the power of the YouTube Iframe API

I'm currently working on integrating the Youtube player API to enable video toggling when I close a modal box. While the iframe is being created as expected in my code, the button does not seem to have control over the iframe through the API. <di ...

What is the name of the scrolling header effect achieved in the following?

I've been seeing a lot of people using a unique header effect lately and I'm curious to learn more about how it's done. Can anyone explain the process behind achieving this effect, what it's called, and if there are any good tutorials a ...

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Is it possible to initially hide text fields and only reveal them when a specific drop down option is selected? The current JavaScript code somewhat achieves this, but I would like the input fields to remain hidden by default. <script language=" ...

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

internet explorer causing issues with .html() method

My webpage is encountering an issue with Internet Explorer when using AJAX to retrieve data and the .html() function to change the content of a div. While Firefox, Google Chrome, Safari, and Opera work fine, IE 7, 8, and 9 do not respond to the .html() fu ...

Is using $.getScript to fetch a cross-domain JavaScript file containing JSON content a recommended approach?

Just starting out with JSONP, here's my situation: I'm using PHP to create a js file containing JSON data for the front-end to access. I've tried the method below and it seems to be functioning properly. However, I have some questions: A) ...

The issue of duplicate backgrounds appearing on the burger menu when adjusting the height

There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating. .bm-menu { background-color: rgba(255, 255, 255, 0.9); height: 60vh; position: fixed; transition: top 0.3s; to ...

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

Show the entire background photo

Below is the CSS code I am currently using within an inline style: <div class="home-hero" style="background-image: url(https://dummyimage.com/300); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; wi ...

Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result. Here is what I currently have: ...

JSP generates unconventional HTML output

I'm encountering a strange issue with one of my JSP pages. It seems like the HTML is not being fully rendered. The output looks like this: <html> ... <table> ... </table> <div id= So, the last line is exactly what ...

Utilizing clip-path polygons for effective styling on Firefox and iOS

I have been working on a plugin to create animated modal boxes by utilizing the clip-path property. However, I have encountered an issue where this code only seems to work in Chrome. You can view the codepen demo here. Unfortunately, it appears that Firef ...