当前位置：文江博客话题详情

如何确保网页打开时滚动条位于中间

发布于 2024-12-11 04:28:31 字数 110 浏览 0 评论 0原文

我正在尝试创建一个水平滚动页面，并且希望页面打开时中间有滚动条，以便用户可以选择向左和向右滚动（默认情况下，它打开时左侧有滚动条）。我怎样才能做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笔芯 2024-12-18 04:28:31

评论后更新如果正文的宽度不超过浏览器的视口：
在元素内滚动：

var elem = document.getElementById("container"); //div#container
var elemWidth = elem.scrollWidth;
var elemVisibleWidth = elem.offsetWidth;
elem.scrollLeft = (elemWidth - elemVisibleWidth) / 2;

Use this code to vertically & horizontally center a page (see also: this answer):

 window.scrollTo(
     (document.body.offsetWidth -window.innerWidth )/2,
     (document.body.offsetHeight-window.innerHeight)/2
 );

要仅水平居中，请使用：

window.scrollTo((document.body.offsetWidth -window.innerWidth )/2, 0);

Updated after comment If the body's width doesn't exceed the browser's viewport:
Scrolling inside an element:

var elem = document.getElementById("container"); //div#container
var elemWidth = elem.scrollWidth;
var elemVisibleWidth = elem.offsetWidth;
elem.scrollLeft = (elemWidth - elemVisibleWidth) / 2;

Use this code to vertically & horizontally center a page (see also: this answer):

 window.scrollTo(
     (document.body.offsetWidth -window.innerWidth )/2,
     (document.body.offsetHeight-window.innerHeight)/2
 );

To only center horizontally, use:

window.scrollTo((document.body.offsetWidth -window.innerWidth )/2, 0);

回复收藏 0 原文

风筝有风，海豚有海 2024-12-18 04:28:31

在 onload< 中使用 JavaScript 函数 scrollTo /代码> 事件。有关如何获取当前窗口大小的更多信息，请查看本文。

回复收藏 0 原文

像你 2024-12-18 04:28:31

一种可能性是在加载时使用 javascript scrollto页面（只需将其放入您的 onload 或 domready-event)：

window.onload = function(){
  window.scrollTo(100, 100); // (X,Y)
}

只需将 x/y 值设置为您需要的值即可。

one possibility is to use javascripts scrollto when loading the page (simply put this in your onload or domready-event):

window.onload = function(){
  window.scrollTo(100, 100); // (X,Y)
}

just set the x/y values to the ones you need.

回复收藏 0 原文

天气好吗我好吗 2024-12-18 04:28:31

另一种方法是#href。如果您没有将尾部标记添加到网址的问题

 $("#iwillHelp")[0].click();

    body{
    margin: 0;
}

.top{
    width:100vw;
    height: 100vh;
    background-color: red;
}

.mid{
    width:100vw;
    height: 100vh;
    background-color: green;
}

.bottom{
    width:100vw;
    height: 100vh;
    background-color: blue;
}

<body id="mainBody">
    <div class="top">how to land at the middle of webpage</div>
    <a id="iwillHelp" href="#testCenter"></a>
    <div class="mid" id="testCenter">How to land in this green coloured section</div>
    <div class="bottom">Please help me</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

another way is # href. If you don't have Problem with tail tag added to url

 $("#iwillHelp")[0].click();

    body{
    margin: 0;
}

.top{
    width:100vw;
    height: 100vh;
    background-color: red;
}

.mid{
    width:100vw;
    height: 100vh;
    background-color: green;
}

.bottom{
    width:100vw;
    height: 100vh;
    background-color: blue;
}

<body id="mainBody">
    <div class="top">how to land at the middle of webpage</div>
    <a id="iwillHelp" href="#testCenter"></a>
    <div class="mid" id="testCenter">How to land in this green coloured section</div>
    <div class="bottom">Please help me</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

回复收藏 0 原文

~没有更多了~