开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

滚动后,将元素放置在屏幕中间

滚动后，将元素放置在屏幕中间可以通过使用 JavaScript 和 CSS 实现。以下是一个简单的示例代码，可以将指定元素放置在屏幕中间：

HTML 代码：

<div id="myElement">我是要放置在屏幕中间的元素</div>

CSS 代码：

#myElement {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 代码（可选）：

window.addEventListener('scroll', function() {
  var element = document.getElementById('myElement');
  element.style.top = (window.pageYOffset + window.innerHeight / 2) + 'px';
  element.style.left = (window.pageXOffset + window.innerWidth / 2) + 'px';
});

这个代码将会在滚动页面时，将指定的元素放置在屏幕中间。请注意，这只是一个简单的示例，实际应用中可能需要进行更多的调整和优化。

相关搜索:在滚动时查找位于可见屏幕(视口)中间的元素将GADBannerView放置在屏幕底部始终将伪元素水平放置在中间文本被放置在屏幕上，但它会滚动在jQuery中使元素更靠近屏幕中间将元素放置在TextBox上在屏幕上放置可变大小的元素 CSS -将元素放在其他元素之上并放在屏幕中间如何将放置在iFrame内部的div放置在屏幕中央将ngIf放置在表单元素上后，FormControl元素未定义如何将表格垂直放置在div的中间将div放置在页面或屏幕的底部将滑出窗体放置在屏幕的右边缘在屏幕中央滚动后如何制作ListView项目 React Native scrollview在屏幕更改后停止滚动将元素放置在移动键盘上方将底部元素放置在垂直中心将元素放置在多行EditText的下方将div元素放置在彼此的中心将抽屉元素放置在菜单的底部

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

04

Material Design — App bars: topApp bars: top

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

06

Material Design — App bars: bottomApp bars: bottom

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

08

Human Interface Guidelines —— Scroll Views

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

08

Material Design — 菜单（Menus）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

最新iOS设计规范四｜3大界面要素：视图(Views)

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。

03

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏，这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》，翻译活动由http://www.wpmind.com/ 的站长小指发起，最终版本将会在http://www.wpmind.com/ 发布。希望更多的人参与到Windows Phone开发中来。之前，Jake已经在他的Blog中发布了他翻译的部分：Windows Phone 7用户界面框架。本人负责翻译的是W

07

关于首页设计框架和一些细节处理分析

开始觉得很简单，毕竟我也是对于 UITableView和 UICollectionView 很溜的码农。

02

Unity2D开发入门-UI 菜单页面

Canvas和Panel是Unity 2D UI中两个常用的组件，它们在不同的情况下有不同的用途。

04

创意卡片式项目管理界面UI设计源码

这是一款非常有创意的卡片式项目管理界面UI设计效果。该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。

02

革命性创新，动画杀手锏 @scroll-timeline

在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。

02

创建水平滚动的正确方式【CSS 网格布局】

自从奈飞 Netflix 成为了家喻户晓的名字以来，在移动端中我们一直使用横向布局。水平滚动容器（列表）已经成为了一种常见的布局做法，而不是将东西都堆叠在页面上，这将减少占用小屏幕设备垂直的空间。

05

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

09

深度解析 Jetpack Compose 布局

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发，使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。Compose 使用全新的组件——可组合项 (Composable) 来布局界面，使用修饰符 (Modifier) 来配置可组合项。

03

【前端】CSS : position

正常的布局行为，即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和 z-index 属性无效。

01

干货！不得不知的UI界面中“行为召唤按钮”设计秘诀

以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

09

《101 Windows Phone 7 Apps》读书笔记-BOOK READER

课程内容 Ø编页 ØList Picker Ø拉伸List Box 控件中的条目本章的Book Reader应用程序为Jane Austen的经典小说《傲慢与偏见》提供一种专门为手机进行优化的阅读体验。书的字体来自Gutenberg项目（www.gutenberg.org），由于其版权已经过期，因此它为美国人民提供了免费的电子书。如果你打算发布一个包含Gutenberg项目的应用程序，确认你已经理解了Gutenberg项目的许可证。详见www.gutenberg.org。为了达到最好

06

移动端滚动研究

在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:

02

挥别web移动端开发差异和经典坑

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

02

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表，该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

05

html 下拉导航栏源码,html导航栏下拉菜单怎么制作？这里有详细的代码实例「建议收藏」

.dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。

05

java swing图形化界面_javagui界面设计

本文链接: http://blog.csdn.net/xietansheng/article/details/72814531

05

使用 Compose 构建 Wear OS 应用

适用于 Wear OS 的 Compose 已推出了开发者预览版，使用 Compose 构建 Wear OS 应用，不仅可以轻松遵循 Material You 指南，同时可以将 Compose 的优点发挥出来。开箱即用，帮助开发者使用更少的代码快速构建出更精美的 Wear OS 应用。本文将通过 Wear Compose 主要的可组合项 (Composable) 来帮助您更好地了解如何使用 Compose 来进行构建。

02

Jetpack Compose中的布局组件、状态栏高度padding

Jetpack Compose 提供了一系列用于构建用户界面的布局组件，这些组件可以帮助您创建各种复杂的布局结构。

01

[ISUX译]iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

文章索引 4.1.1 状态栏 4.1.2 导航栏 4.1.3 工具栏 4.1.4 工具栏与导航标准按钮 4.1.5 标签栏 4.1.6 标签栏标准图标 4.1.7 搜索栏 4.1.8 范围栏 4.2.1 活动 4.2.2 活动视图控制器 4.2.3 集合视图 4.2.4 容器视图控制器 4.2.5 图片视图 4.2.6 地图视图 4.2.7 页面视图控制器 4.2.8 浮出层 4.2.9 滚动视图(Scroll View) 4.2.10 分栏视图控制器 4.2.11 表格视图 4.2.12 文本视图 4.2

05

Flutter中构建布局顶

然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。

01

[译]《iOS Human Interface Guidelines》

当你允许广告在你的app中出现时，用户查看或与它们交互时你可以得到收入。（这里你可以看到一个简单的工程中iAd横幅的占位符。）

04

如何快速提升设计感

导语 | 好的设计原则是能被所有人掌握并运用的。本文列出了一些目前应用广泛又比较基础的设计实战窍门，掌握它们之后或许你能让你的设计朋友刮目相看呢！如果你不相信你也可以学习设计，那么请回顾一下我们的朋友——传奇的David Eric Grohl对学习新事物的看法：我从来没有专门接受过鼓的培训，也没有专门上过吉他课。我都是自己琢磨，想办法搞明白它。如果你对一件事拥有绝对的热情，加上你的驱动力和专注力，你可以做到任何你想做的事情。 *译者注：David Eric Grohl曾是美国著名朋克乐队Nir

06

Android中文API——ScrollView

Android中文翻译组：http://androidbox.sinaapp.com/

03

写给初学者的Jetpack Compose教程，Lazy Layout

经过前面4篇文章的学习，相信大家都已经成功入门了Compose编程。不仅了解了Compose的核心编程理念（声明式UI），而且已经可以使用Compose编写一些简单的小程序了。

01

Material Design — 网格列表（Grid lists）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

第128期：Flutter的flex布局组件（row 和 column）

这两个组件可以用来进行做flex布局，row可以用来做水平方向的布局，column可以用来进行垂直方向上的布局，这两个类都是基于web的flex布局模式实现的。

02

CSS | 视差滚动 | 笔记

image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化，实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。

02

bootstrap快速入门笔记（七）-表格,表单

2，条纹表格：通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

03

html5简单拖拽实现自动左右贴边+幸运大转盘

此篇文章主要实现两个功能： 1、点击屏幕下方签到悬浮按钮； 2、弹出幸运大转盘，转盘抽奖签到效果如图：在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是

05

解读小程序最新开发能力，官方只说了部分

微信7月11日发布了一大堆小程序新特性，而官方发文只提了其中几个点，今天为大家详细解读一下，主要涵盖以下内容：（注.这不是热更新，这是需要更新微信到1.4.0版本才能体验的）新增3个组件标签：新增 <cover-view /> 可以覆盖在原生组件之上新增 <open-data /> 可以展示微信开放数据新增 <rich-text /> 可以展示富文本解读： cover-view是为了解决video或canvas上面没法放置元素的问题，举个栗子，在这之前，要在视频上放一个图或者一段字，那是很难的，借

07

markdown 编辑器实现双屏同步滚动

由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。

02

Material Design — 提示框（ Dialogs）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

速读原著-Android应用开发入门教程(作为简单容器使用的视图组)

单选按钮组（RadioButton）是一组逻辑上相关的按钮，它们之中只能有一个被选中，单选按钮通常单选按钮被设计成圆形的外观。因此需要一个类将各个单选按钮包含在一起。

01

现代浏览器探秘(part4)：事件处理 [每日前端夜话(0x14)]

现代浏览器探秘(part1)：架构现代浏览器探秘(part2)：导航现代浏览器探秘(part3)：渲染

02

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。

03

深入理解bootstrap

1.CSS12栅格系统：以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布

06

Qml开发中的性能Tips(翻译文)

Qt支持任何标准图像格式，包括PNG和JPEG等位图格式，以及SVG等矢量图形格式。与位图图像相比，渲染SVG图像很慢。

03

CSS Position 定位

生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外

01

前端面试01-HTML+CSS

常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等

02

python appium操作手机及ap

在网上看了些，一起整理了下，还是有些不够全，但都比较常用了，先放出来吧： #锁定屏幕时间秒 driver.lock(5) #将APP放置后台参数时间秒 driver.background_app(5) #收起键盘 driver.hide_keyboard() #启动Activity driver.start_activity('包名', 'activity名') #打开通知栏 driver.open_notifications() #检查应用是否已经安装参数包名 driver.is_app_insta

01

WebRender：让网页渲染如丝顺滑

Firefox Quantum 发布在即。它带来了许多性能改进，包括从 Servo 引入的的极速 CSS 引擎。

03

探索 Flutter 中的 NavigationRail：使用详解

在 Flutter 中，NavigationRail 是一个垂直的导航栏组件，用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备，如平板电脑和桌面应用程序。NavigationRail 提供了一种直观的方式来浏览应用程序的不同部分，并允许用户轻松地切换页面或执行导航操作。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭