基于视口的中心滚动，而不是固定大小的容器
基于视口的中心滚动是一种网页设计和开发技术，它通过调整网页内容的显示位置，使得网页在滚动时以视口中心为基准进行滚动，而不是固定在一个固定大小的容器中。
这种滚动方式可以提供更好的用户体验，特别是在移动设备上浏览网页时。它可以使网页内容更加灵活地适应不同尺寸的屏幕，同时保持内容的可读性和可访问性。
基于视口的中心滚动在响应式网页设计中非常常见，它可以通过CSS和JavaScript来实现。通过使用CSS的transform属性和translate函数，可以实现网页内容在滚动时以视口中心为基准进行平移。同时，通过JavaScript可以监听滚动事件，并根据滚动位置和视口大小来动态计算平移的距离。
这种滚动方式适用于各种类型的网页，特别是那些需要展示大量内容的页面，如新闻网站、博客、电子商务网站等。它可以提供更好的用户体验，使用户能够更轻松地浏览和阅读网页内容。
腾讯云提供了一系列与网页开发和云计算相关的产品，可以帮助开发者构建和部署基于视口的中心滚动的网页。其中，腾讯云的云服务器（CVM）提供了可靠的计算资源，可以用于托管网页应用程序。腾讯云的云数据库（CDB）提供了高性能和可扩展的数据库服务，可以存储和管理网页内容。此外，腾讯云还提供了云存储（COS）、内容分发网络（CDN）等产品，可以帮助优化网页的加载速度和性能。
更多关于腾讯云相关产品的介绍和详细信息，您可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
2回答
基于视口的中心滚动，而不是固定大小的容器
javascript、jquery、html、responsive
我正在做一个基于大图像(7000X5321)的项目。图像将会像一张巨大的地图。在这张地图的中心，用户将拥有主要的兴趣点，所以我的目标是，一旦页面加载，这个点需要在视口的中心，从那里，用户将水平或垂直滚动。我的问题是，虽然我可以调整滚动位置与我的脚本，我需要这个页面是响应性的，所以调整居中这一点需要完成基
浏览 14提问于2017-07-12得票数 0
回答已采纳
1回答
如何背景-注意:固定到div而不是视口。
html、css、background-image、background-attachment
('cover.jpg') no-repeat fixed center center / cover; width: 100%;预期输出：背景图像大小调整为350 px100%(在我的示例中为350x900)，应该具有基于<div id="cover"></div>的滚动效果。实际输出：将背景图像调整为视口(在我的示
浏览 2提问于2014-08-27得票数 1
3回答
仅限于特定DIV容器中的垂直滚动条
html、css、vertical-scrolling
在左容器和右容器中，当数据超过容器的视口高度时，我需要滚动。我只希望红色高亮显示的容器滚动--外蓝色容器是固定的，蓝色容器内的黄色部分是固定的。只有红色容器的内容应该滚动，只有当适用时。如果您将示例代码页的容器</
浏览 2提问于2014-01-07得票数 10
1回答
固定页眉和页脚，在1fr CSS网格区域内具有可滚动的侧边栏
css、css-grid
我有一个webapp的CSS网格布局，有一个固定大小的页眉和页脚(用rem单元定义)和一个可扩展的中心行(定义为1fr)，其中包含两个侧边栏和一个中央内容区域。外部栅格容器定义了宽度和高度，以填充视口(100vw/vh)。我希望中间的一行占据页眉和页脚之间的所有空间，并使任何溢出的页面滚动，而不是扩大页面的高度。我尝试
浏览 2提问于2017-10-13得票数 1
1回答
使用jQuery隐藏某个高度超过某个高度后的HTML元素
jquery、show-hide、sticky-footer、sticky
我试着在这里做一个演示用的原型。当视口小于900 to时，页面底部有一个固定位置页脚。- Once the SCROLL position on the page passes a certain threshold, this footer get's hidden当视口大于900is时，它的行为就像普通页面一样.页脚将出现在内容之后。我基本上是在做你在iOS联系人应用程序中看到的事情(你正在查看的</
浏览 3提问于2011-07-25得票数 0
1回答
div高度占用具有非固定整体高度的其余浏览器窗口
javascript、jquery、css、html
我可以让Alvaro的小提琴：以我想要的方式工作，只针对宽度，而不是高度……我的下部组件画布非常大(5000px正方形)，我希望它在两个方向上滚动，但有“视口”增长到其包含的下部窗口的完整大小…#up { background: green; height:80px}
#down { background:pink; height: calc(100% -
浏览 1提问于2014-03-15得票数 0
1回答
容器的绝对位置是基于主体容器而不是其父容器的
html、css、position
我需要根据<body>容器而不是最近定位的父容器将表容器的位置设置为绝对的。无论向下滚动，<header>和<div id=searchform
浏览 3提问于2015-04-18得票数 1
1回答
在div的可见部分居中显示内容
javascript、html、css
我有一个容器div，它随着网站的延迟加载而扩展，因此随着用户滚动而变得越来越高，直到所有内容加载完毕。在这个容器中，我希望将一些内容居中放置在容器div的可见部分，而不管用户滚动到哪里。例如，用户已经滚动了足够的内容来加载所有内容，并且滚动条一直向上滚动。相对于容器div的多少部分在视口中随时
浏览 1提问于2018-09-25得票数 0
4回答
如何获取浏览器屏幕的视窗高度？
javascript、jquery
我看到的所有问题都有答案：但这返回的不是视口的大小，而是页面的大小，例如，如果我将<body>样式设置为高度1000px，它将返回1000，但不会返回视口的大小我需要视口的大小，而不是可滚动的</
浏览 0提问于2014-12-23得票数 0
2回答
如何将元素修复到与屏幕边缘具有可变距离的页面上？
jquery、css、sticky
我有一个图形，我需要显示为一个粘性元素66%的道路上的容器div我的网页。“位置:固定”通常是我想要的，但是，由于这是修正到视口和容器div有时是一个未知的距离，从边缘的视口，我不能用它来确定准确的水平点，它应该显示。一些更多的信息:容器div是响应的，最大为1080 in，在视</e
浏览 2提问于2015-06-24得票数 0
回答已采纳
1回答
将固定背景与CSS calc对齐
css、responsive-design、fixed、background-position、background-attachment
所讨论的设计是这样的：
基本上有两个媒体查询:一个是关于最大高度的查询，一个是关于最小宽度的查询。如果有足够的视口高度，则在内容区域有一个滚动条，并且设计高度是固定的。但是，如果视口不够大，无法显示预定义的高度，那么高度中介查询将从内部div中删除滚动条，这样就不会有两个嵌套的滚动容器(bo
浏览 4提问于2014-07-18得票数 0
1回答
将视口宽度设置为滚动窗格宽度
java、swing、jscrollpane
有没有办法将JScrollPane的视区宽度固定为其所有者( JScrollPane)的宽度。我的目标是一个可以向下滚动的JScrollPane，但视口的宽度被压缩/设置为JScrollPane的大小。 我尝试手动设置视口的大小，但失败了，因为我使用GridLayout来布局组件。我还尝试了GridB
浏览 33提问于2019-06-12得票数 1
1回答
如何隐藏水平溢出绝对元素
html、css、tailwind-css
我用的是顺风。我想要创建一个具有固定大小图像的布局。我的容器是1200 My和对中的视图端口。这是我的代码：
浏览 2提问于2021-12-29得票数 0
1回答
为什么要在img标签中使用size属性，因为我们可以使用媒体查询和图像容器来代替？
css、responsive-images
好的，这是这样的情况:我们希望在视口大小为800px或更大时在50%的视口中显示图像，否则图像为100%，因此html看起来如下所示： <img srcimg{} .container{width:50%}所以我们可以控制图像容器，而
浏览 0提问于2015-11-04得票数 0
1回答
如何强制标签为视窗宽度？
html、css、ipad、mobile、tablet
如何让标记(在本例中为body标记)仅占用视区的大小，即使它有一个固定宽度的子项？描述:如果我在Safari5中加载上面的链接并调整浏览器的大小，我会看到预期的行为。不显示水平滚动条。溢出视口的内容将被隐藏。如果我将其加载到ipad中，溢出的内容是可见的，并导致滚动条。
预期结果:滚动条永远不会出现，
浏览 0提问于2011-12-18得票数 3
2回答
在粘性标题中计算屏幕大小
javascript、jquery、html、css
对于固定高度的标题，有大量的教程/示例可以让标题在滚动条上滚动。然而，我在一个只有一页的网站上工作，最初的部分是一个全屏图像。然后，用户向下滚动以显示标题和其他内容区域。所以我的问题是，我如何更改我的代码，以考虑到视口/屏幕大小-而不是使用固定的标题大小？
浏览 21提问于2016-08-02得票数 1
回答已采纳
2回答
100%背景图片包装器滚动消失的问题
css、background-image
然后我在宽度为100%的容器周围添加了#。我这样做是因为页面的背景图像是巨大的宽度。问题是如果浏览器水平调整为较小的大小...像这样说..700px宽(或者更小，就像在iPhone上一样)，当你向右滚动时，页眉和页脚都消失了，尽管#main包装器保持不变。我看到其他一些人也有这个问题，但我不是CSS忍者，所以我不能在我的网站上复制解决方案-如果以前有人问过这个问题，我很抱歉。
谢谢!
浏览 0提问于2011-06-12得票数 3
回答已采纳
1回答
编辑:这不是重复的，这个问题是关于居中而不是从右边定位。这不起作用，因为它将背景图像定位为中心，而不是从50%开始。background-position: 50vw center;
这不起作用，因为它是基于视口而<
浏览 0提问于2020-10-12得票数 0
1回答
对于某些不同的页面大小，应将视图设置为什么？
ipad、viewport
我有一个身体宽度为1050 of的页面。如果我想在页面的任何一边(风景)有一点空间，那么它看起来很有趣，我应该将viewport标记设置为什么？以上这些并没有达到我想要的效果。
当我在做的时候，在人像视图中的视口是什么？或者这不重要？(当检测到方向改变时，我知道如何更改视口值.但无论出于什么原因，我都无法得到它，所以愚蠢的调整效果被取消了)。当我们问问题的时候，能不能有人把视口设置
浏览 1提问于2011-12-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
