Блог

Мобильное приложение имеет страницу, на которой показана комната с несколькими функциями исправления и несколькими, которые могут быть условно отображены. Дисплей (только в портретном режиме) достаточно большой, чтобы не требовалась прокрутка.

Теперь я хочу иметь аналогичный дисплей, за исключением того, что есть несколько строк элементов управления, которые влияют на то, какие элементы отображаются. Количество элементов управления будет разным. Все изображения (*.svg) имеют размер 360 x 242 пикселя.

Как я могу сделать так, чтобы все изображения перекрывались, даже при прокрутке?

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;titlegt;Scroll Roomlt;/titlegt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;  lt;link rel="stylesheet" href="merged_mobile.min.css" media="screen"gt; lt;/headgt; lt;bodygt;  lt;div class="content_view"gt;  lt;!-- Channel Mapping --gt;  lt;div class="page"gt;  lt;div class="page_name"gt;  lt;pgt;Room Viewlt;/pgt;  lt;/divgt;  lt;div class="ul_wrapper"gt;  lt;ulgt;  lt;ligt;  lt;button id="height_1" class="nav-side-menu-item"gt;  lt;spangt;Option 1lt;/spangt;  lt;img src="arrow.png" /gt;  lt;spangt;lt;/spangt;  lt;/buttongt;  lt;/ligt;  lt;ligt;  lt;button id="height_2" class="nav-side-menu-item"gt;  lt;spangt;Option 2lt;/spangt;  lt;img src="arrow.png" /gt;  lt;spangt;lt;/spangt;  lt;/buttongt;  lt;/ligt;  lt;ligt;  lt;div class="nav-side-menu-item-divider"gt;Dividerlt;/divgt;  lt;/ligt;  lt;ligt;  lt;button id="option_a" class="nav-side-menu-item"gt;  lt;spangt;Alphalt;/spangt;  lt;img src="arrow.png" /gt;  lt;spangt;lt;/spangt;  lt;/buttongt;  lt;/ligt;  lt;ligt;  lt;button id="option_b" class="nav-side-menu-item"gt;  lt;spangt;Betalt;/spangt;  lt;img src="arrow.png" /gt;  lt;spangt;lt;/spangt;  lt;/buttongt;  lt;/ligt;  lt;ligt;  lt;div class="nav-side-menu-item-divider"gt;Room Diagramlt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="moving_room"gt;  lt;img class="room_base_img" src="background.svg" alt="room background"gt;  lt;img class="room_diagram_img" src="walls_transparent.svg" alt="transparent walls"gt;  lt;img class="room_diagram_img" src="table.svg" alt="table"gt;  lt;img class="room_diagram_img" src="couch.svg" alt="couch"gt;  lt;/divgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/bodygt; lt;/htmlgt;  

merged_mobile.min.css

 :root{ --row-height: 67px; --highlight-color: #077bff; --tertiary-background-color: #404040; --primary-font-color: white; --secondary-font-color: #ccc; --header-color: #fff; }  /* Thin */ @font-face { font-family: "SF Display Thin"; font-display: block; src: url("../fonts/SF_Pro_Display_Thin.woff2"); }  /* Regular */ @font-face { font-family: "SF Display Regular"; font-display: block; src: url("../fonts/SF_Pro_Display_Regular.woff2"); }  html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; min-width: 300px; }  body{ font-family: 'SF Display Regular', sans-serif; height: 100%; background-color: black; color: white; padding: 0; margin: 0; caret-color: orange; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10 /Edge */ user-select: none; }  p { margin: 0; }  ul { list-style-type: none; padding: 0; margin: 0; border: none; outline-style: none; }  li { padding: 0; margin: 0; }  button { height: 36px; width: 100%; cursor: pointer; padding: 0; margin: 0; font-weight: 200;   }  ::-webkit-scrollbar-track { background-color: #404040; }  ::-webkit-scrollbar { width: 6px; }  ::-webkit-scrollbar-thumb { background: dimgray; }  .content_view { overflow-x: hidden; height: 100%; }  #room_diagram_button{ background-color: red; } #room_diagram_button img{ width: 25px; float: right; margin-top: 22px; padding-right: 10px; }  .room_diagram { position: relative; }  .room_base_img { height: 290px; position: relative; width: 100%; left: 0; } .room_diagram_img { height: 290px; position: absolute; width: 100%; left: 0; } .room_diagram_img.speaker { display: none; } .moving_room {  height: 290px;  /*position: absolute;*/  width: 100%;  /*left: 0;*/ }  .nav-side-menu-item { color: var(--primary-font-color); font-size: 20px; height: var(--row-height); background-color: transparent; border: none; } .nav-side-menu-item span:first-child{ float: left; height: 100%; white-space: nowrap; width: calc(100% - 150px); text-align: left; margin-left: 15px; overflow: hidden; text-overflow: ellipsis; line-height: var(--row-height); }  .nav-side-menu-item span:nth-child(2), .nav-side-menu-item span:nth-child(3) { font-size: 14px; padding-right: 10px; float:right; width: 90px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-color: transparent; text-align: right;  height: var(--row-height); line-height: var(--row-height); } .nav-side-menu-item img{ width: 22px; height: 22px; float: right; margin-top: 22px; padding-right: 10px; }  .nav-side-menu-item-divider { text-decoration: none; color: var(--primary-font-color); font-size: 20px; text-align: center; line-height: normal; background-color: dimgray; cursor: auto; padding-top: 5px; padding-bottom: 5px; }  .page { width: 100%; height: 100%; position: absolute; }  .page_name{ position: relative; background: #404040; height: 50px;  } .page_name p{ font-size: 24px; line-height:50px; height: 50px; white-space: nowrap; text-align: center; min-width: 320px; }  .back_button img{ width: 30px; height: 30px; }  .back_button{ height: 50px; width: 50px; position: absolute; border: none; outline-style: none; background-color: var(--header-color); }  .page_contents{ padding: 15px; }  .ul_wrapper { height: -moz-calc(100% - 50px); height: -webkit-calc(100% - 50px); height: calc(100% - 50px); display: block; overflow: auto; } .ul_wrapper li { line-height: 0; border-bottom: 1px white solid; }  

Я добавил атрибуты идентификатора, чтобы я мог управлять элементами управления с помощью jQuery.

 lt;ligt;  lt;div id="moving_room"gt;  lt;img class="room_base_img" id="roombg" src="background.svg" alt="room background"gt;  lt;img class="room_moveable_img" id="roomwalls" src="walls_transparent.svg" alt="transparent walls"gt;  lt;img class="room_moveable_img" id="roomt" src="table.svg" alt="table"gt;  lt;img class="room_moveable_img" id="roomc" src="couch.svg" alt="couch"gt;  lt;/divgt; lt;/ligt;  

И несколько новых стилей.

 .room_base_img {  position: relative;  width: 100%;  height: auto; } .room_moveable_img {  height: auto;  position: relative;  width: 100%; }  

Я определил высоту верхнего изображения и применил ее к изображениям под ним.

 var imght = $("#roombg").height(); $("#roomwalls").attr("style", "top: _px".stuffus(0 - imght)); $("#roomt").attr("style", "top: _px".stuffus(0 - 2 * imght)); $("#roomc").attr("style", "top: _px".stuffus(0 - 3 * imght));   

Последнее изображение нужно было прокрутить 6000px, но оно работает.