时间戳

首页 > 解决方案 > HTML 中的不同窗口

javascript - HTML 中的不同窗口

问题描述

在创建网站时，我发现浏览他人的网站可以更轻松地可视化我想要做什么。我发现某个网站似乎将浏览器窗口设置为允许同时在屏幕上显示单独的“窗口”。所以，如果你滚动屏幕的一部分，屏幕的其余部分不会这样做，只有你滚动的部分。同样，当您滚动整个屏幕时，某些元素不会随之滚动，而是看起来固定在原地。

我正在寻找的是一种在我的网站中实现它的方法 - 类似于这个“示例”：

[...]
<window position="some-number" size="some-number">
    <!-- not a real element -->
    [...]
</window>
[...]

有没有这样做的一般方法？你必须用 JavaScript 编写这种行为吗？

标签： javascripthtmlcss

解决方案

滚动时元素保持原位的一种方法是使用position: fixedCSS 语句。请参阅示例。

#notscrolling {
  position: fixed;
  left: 200px;
  top: 10px;
}
<div id="scrolling">
  <p>
    This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will
    scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>This will scroll<br>
  </p>
</div>
<div id="notscrolling">
  <p>this will not scroll</p>
</div>
如您所见，最左边的p滚动条，但最右边p的没有。

推荐阅读