How to set the scroll position of a div with a div overflowing inside it?

Question

I have the following html in a really simple html document.

<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>

Then, I have this 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 project_icons class makes the doublescroll_projects div scrollable in both directions. I want to set the scroll position to be half way scrolled vertically and halfway horizontally on the page load.

I've looked at as many "set scrollbar" questions and answers I could find but nothing worked, or at least worked for me. If theres a question that I missed please let me know, otherwise how would I do this?

Solution

you can't do it with pure CSS. You need to use js/jQuery, for example:

$('#doublescroll_projects').scrollLeft(50);
$('#doublescroll_projects').scrollTop(50);

https://api.jquery.com/scrollleft/

https://api.jquery.com/scrollTop/