CSS / JS）在屏幕右侧移动视口

Question

我想制作这样的网站。

有一个身体的宽度远远超过视口的长度 视口应该从一开始就位于屏幕的右侧而无需用户的控制。

我只能使用HTML，CSS和JS，因为服务器不允许我使用PHP和其他人 如何使用CSS或Javascript进行制作？

Answer 1

你可以简单地用JS滚动。

$('body').scrollLeft($(document).outerWidth()); 

<强> DEMO

＆＃13;

＆＃13;

/* Write JavaScript here */
$(document).ready(function() {
  $('body').scrollLeft($(document).outerWidth());
});
$("button").click(function() {
  $('body').scrollLeft($(document).outerWidth());
});

＆＃13;

.container {
  height: 200px;
  white-space: nowrap;
  width: 4000px;
}
.box {
  color: #FFFFFF;
  border: 1px solid red;
  box-sizing: border-box;
  height: 200px;
  width: 200px;
  float: left;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>ScrolltoEnd</button>
<div class="container">
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">Content</div>
  <div class="box">I'm the End</div>
</div>

＆＃13;

＆＃13;

＆＃13;