属性可以获取或设置一个元素的内容垂直滚动的像素数....此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。 scrollLeft/Top在日常工作中是比较频繁使用关于操作滚动条的相关api，他们是一个可以设置的值。...在实际工作中如果对于滚动操作有很频繁的需求，个人建议去使用better-scroll，它是一个移动/web端的通用js滚动库，内部是基于元素transform去操作的滚动并不会触发相关重塑/回流。...例如，不论页面是否有垂直/水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX/Y 值都将为 0 。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。
但是，可以使用 Javascript 滚动内容。 Scroll ? 在上图中，无论内容是否长，滚动条总是可见的。注意，这取决于操作系统。...Auto auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。 ? 注意，在图中，只有当内容比其容器长时，滚动条才可见。...Overflow-Y 该家伙负责y轴或元素的垂直边。 用例和事例 简单滑块 我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。 ?...根据MDN： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。它有两个值： auto： 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...水平滚动问题 通常，我们会遇到水平滚动的问题，当原因未知时，滚动滚动会变得更加困难。 在本节中，我将列出水平滚动的一些常见原因，以便大家以后在构建布局时可以想到到它们。
所选视穹 用于所选视穹的键盘快捷键 键盘快捷键 操作 Ctrl + 上箭头 将视穹向远离照相机的方向移动。 Ctrl + 下箭头 将视穹向照相机的方向移动。...Ctrl + 右箭头 向右移动视穹，使之与场景照相机的朝向垂直。 Ctrl + 左箭头 向左移动视穹，使之与场景照相机的朝向垂直。 Ctrl+U 增大视穹高程。 Ctrl + J 减小视穹高程。...沿所需方向移动指针。 加号 (+) 或 Ctrl+滚动鼠标滚轮 放大。 放大该地图。 减号 (-) 或 Ctrl+滚动鼠标滚轮 缩小。 缩小地图。...在平移立体影像对时，地形跟踪会自动将立体光标保持在高程表面上。此功能在导航立体显示时非常有用。如果要通过远程网络连接使用非常大的影像，建议您不要使用此功能，因为系统检索正确信息可能会造成严重延迟。...Ctrl+Enter 移动至下一条记录并单独选择此记录。如果选择了多个行，会从活动单元格所在的行开始移动。这在按顺序逐条处理表记录、查看或编辑各条记录及在地图上查找其表示的要素时尤为有用。
**纹理的垂直翻转（Texture Flipping）** Pixi.js 可能在某些情况下会翻转纹理，特别是在处理 WebGL 渲染管线时。...**视口和画布缩放** Pixi.js 可能会基于视口或画布的比例调整纹理坐标。...通过这些检查，你可以了解为什么 `vTextureCoord.y` 的范围缩小到了 0~0.6。 2.部分安卓浏览器中的禁止滚动失效 在前端的许多业务场景中，可能会遇到需要禁止滚动的情况。...**滚动容器问题**：在一些移动浏览器中，`` 和 `` 元素的滚动行为可能有所不同。...为什么在部分安卓浏览器中，body设置了overow=hidden 但页面还是可以滚动?
而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。...真机调试必须保证移动设备同服务器间的网络是相通的。 三、视口 视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小。...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...window.screen.width / window.devicePixelRatio; window.screen.height / window.devicePixelRatio; 理解两个viewport后我们来解释为什么网页会被缩放或出现水平滚动条...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢
浏览器将向上滚动以使输入框在键盘上方，因此粘性标题和浮动按钮将消失。 它看起来与以下内容相似： 这是移动浏览器中的默认行为。...在技术术语中，可见部分被称为视口，而隐藏部分以及当前可见的部分则是布局视口。 主要问题是当虚拟键盘激活时，可视视口的大小会缩小。...我们可以使用垂直媒体查询来在垂直空间足够的情况下显示标题。...无法滚动到页面的最底部 当视口底部有一个带有 position: fixed 的项目时，我们通常会添加 padding-bottom 来偏移页面，使用户可以滚动到最底部。...我心里想，为什么不把CSS比较函数和虚拟键盘的值混合在一起呢？我试了一下，结果还真行。 请查看下面的视频： 这是怎么运作的？
background-attachment： 决定 背景图像的位置 是在 视口内固定 ，或者 随着包含它的区块滚动 。 它的属性值的含义如下： 属性值 含义 fixed 背景相对于视口固定。...减小 的值 translateZ() 会将元素推得更远，并且该元素的滚动速度会变慢。 该值离零越远，视差效应越明显。...例如，较远的东西（即 z 轴上的负平移）会移动得更慢。相反，距离较近的东西（即 z 轴上的正平移）会移动得更快。 另一个物理效应是规模。 如果我们把一些东西移得更远，它就会显得更小。...会以较快的速度向内移动。...如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。 在上图中，应该在屏幕底部的按钮被隐藏了。
(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...=1"> 为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢？...因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度，所以此时：设备的布局视口==视觉视口==理想视口。...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。...但是如果width和initial-scale都设置的时候，浏览器会取两个值较大的，所以可以通过width设置一个最小的布局视口宽度。
(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...=1"> 为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢？...因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度，所以此时：设备的布局视口==视觉视口==理想视口。 看一图就明了： 普通屏幕 两倍屏 ?...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。...但是如果width和initial-scale都设置的时候，浏览器会取两个值较大的，所以可以通过width设置一个最小的布局视口宽度。
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...为什么呢？ 试想一下淘宝这种大型网站，一个分页下的商品条目特别多，并且每个商品条目的页面布局结构又十分复杂，而且 pc 端往往显示的信息是要比手机端更多的。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...理想视口下，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。...屏幕分辨率 1920×1080 表示水平方向含有 1920 个像素，垂直方向含有 1080 个像素，屏幕上总共有 2 073 600个像素点。
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...为什么呢？ 试想一下淘宝这种大型网站，一个分页下的商品条目特别多，并且每个商品条目的页面布局结构又十分复杂，而且 pc 端往往显示的信息是要比手机端更多的。...PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。...比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为物理像素（设备像素），是分辨率的尺寸单位。
el) { return; } // Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...const scrollTop = getScrollTop(el); // Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。...scrollHeight[6] Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。
导读 移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ......为什么强调 普通的使用距离下呢？...window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。 window.outerHeight：获取浏览器窗口外部的高度。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。...测量方式与 clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。 五、1px问题 为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局。
文档流的基本概念 默认情况下，块级元素（如 、、 等）会垂直排列，每个元素占据一整行。...块级元素会垂直排列，每个元素占据一整行，而行内元素则在同一行内水平排列。 二、定位基础 CSS定位属性允许我们改变元素在文档流中的位置，从而实现更复杂的布局效果。...固定定位 固定定位使元素相对于视口进行定位，不管页面滚动与否。设置 position: fixed; 可以实现固定定位，元素会固定在视口中的特定位置。 滚动时会在某个阈值内相对位置固定，一旦滚动超过阈值，元素会跟随滚动继续移动。... 示例中粘性定位的元素会在视口顶部粘住，直到滚动超过它的容器。
innerWidth window.innerWidth 是一个只读属性，表示浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。...scrollTop Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。...注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。...此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。
为什么强调 普通的使用距离下呢？...4.5 移动端适配 为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。...window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。 window.outerHeight：获取浏览器窗口外部的高度。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。...测量方式与 clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。 五、1px问题 为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局。
) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素 window.pageYOffset window.scrollY 浏览器滚动掉的...以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离..., 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点...width+2*padding+2*border如果是border-box的话就等于width scrollHeight/scrollWidth 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容...为内部可滚动的width/height+2*padding scrollTop 内部向上滚动了的距离 style.width/style.height 只包括width/height,不包括其他(返回值带有
前者是卡在414的节点上，后者则是在919“乐迷节”上，就这样，乐视凭一己之力打造出了两个电商节，一个4.14，一个9.19。...这就不难理解乐视生态O2O销售平台总裁张志伟为什么能自信满满的表示：“乐视在过去的919乐迷节中已经在中国电领域创造了一个纪录——它是中国互联网领域唯一一家能比肩阿里双11、京东618的第三大电商节，它更是中国互联网唯一一个在一年内创造...区别平台电商、垂直电商，独创LePar+Lmall互通共融模式 除了引以为豪的电商节，乐视还有一把“刷子”：LePar+Lemall互通共融的O2O模式。...这区别于以天猫、淘宝、京东为代表，以B2C、C2C为主要模式，解决的是用户线上购物的电商1.0时代；也不同于以传统电商在移动端的延伸和微商为代表，以移动电商、社交电商为形态，解决的是用户移动端购物的电商...2、场景电商 乐视其实一直在做的一件事就是布局随意可连接用户场景的终端，比如超级手机是移动场景，超级电视是家庭生活场景，超级汽车是汽车移动场景。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
