首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

干好这件事,卷死所有同行

顶部标签 与输入域左垂直对齐 优点:节省水平空间,标签长度弹性大,可以加快浏览和处理速度。 缺点:垂直空间占用比较大,表单项多时需增加页面滚动。...善用开关按钮 允许用户在两个相反的状态之间进行选择,:有效或无效、是或否、开或关等。...动作 “主动作”,:提交、保存、下一步等;“次动作”,:取消、撤销、返回等。...可优化的点 当表单的必填项未填写完整时,提交或保存等主按钮一般为灰色状态,不可进行下一步操作,当完成必填信息的填写后,按钮变为高亮,可进行下一步操作(但表单项超过5个时则不建议使用主按钮禁用原则)。...主按钮之后的下一步操作 弹框级别-关闭弹框刷新数据。 页面级别-这里我认为有待探讨,大家可以根据实际情况判别是否需要回到列表页。 表单的交互 就地编辑、弹窗、抽屉、页面跳转以及新开页面。

2.5K10

CSS自定义滚动条的样式

本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。...滚动按钮 (上下箭头) ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner — 边角,即当同时有垂直滚动条和水平滚动条时交汇的部分...(3)滚动按钮(:decrement、:increment) 可以设置图片,这点会在下面demo中展示。...scrollbar-face-color — 滚动滚动滑块颜色 scrollbar-track-color— 滚动条轨道、按钮背景的颜色 scrollbar-shadow-color— 滚动框上滑块边框的颜色...> 实现效果: scrollbar.png 说明: (1)滚动条两端的按钮使用的图片,四个角分别使用了四张图片; (2).scolltable实现了水平垂直居中的效果

6.5K692
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

mCSB_buttons.png 第一步:加载 mCustomScrollbar 的样式文件。...:{ scrollType:String }:滚动按钮滚动类型 值:"continuous"(当你点击滚动控制按钮时断断续续滚动) "pixels"(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子...:Integer }:设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素 advanced:{ updateOnBrowserResize:Boolean }:根据百分比为自适应布局 调整浏览器滚动条的大小...");:滚动到顶部(垂直滚动条) $(selector).mCustomScrollbar("scrollTo","bottom");:滚动到底部(垂直滚动条) $(selector).mCustomScrollbar...定义滚动条外观 先了解一下滚动条的 HTML 结构,下面是默认的垂直滚动条结构: <div class="

13.9K30

滚动,你真的懂了吗

让我们来了解下哈 只有window窗体滚动 即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。 手Q吃喝玩乐的站点首页, 在android机上就是使用window滚动 ?...内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体的布局。 故内滚动布局是相对传统的window窗体滚动而言的。...(具体为什么ios和android上会使用不同的滚动方式,可以去了解下=。=) 内滚动布局什么时候会使用了?...window纵向滚动的位置 var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置 var Y = 想滚动到的垂直位置; var X...需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间 这种需求很常见吧~ 那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

1K10

滚动,你真的懂了吗

让我们来了解下哈 只有window窗体滚动 即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。 手Q吃喝玩乐的站点首页, 在android机上就是使用window滚动 ?...内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体的布局。 故内滚动布局是相对传统的window窗体滚动而言的。...(具体为什么ios和android上会使用不同的滚动方式,可以去了解下=。=) 内滚动布局什么时候会使用了?...window纵向滚动的位置 var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置 var Y = 想滚动到的垂直位置; var X...需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间 这种需求很常见吧~ 那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

1.6K70

分享5个关于 Vue 的小知识,希望对你有所帮助(三)

el.scrollIntoView({ behavior: "smooth" }); } }, }, }; 我们有一个名为scrollToElement的按钮...然后我们调用el.scrollIntoView,并使用一个具有behavior属性的对象来更改滚动行为。 2、如何在Vue.js组件中监听窗口滚动事件?...在handleScroll方法中,我们使用window.scrollY属性获取垂直滚动位置。 在模板中,我们有一些可滚动的内容。如果我们通过它滚动,应该看到记录了scrollY的值。...3. mounted 钩子函数 mounted 钩子函数会在组件挂载到 DOM 之后被调用。在这个阶段,Vue.js 已经将组件实例挂载到了指定的 DOM 元素,并且执行了一次渲染。...5、如何在应用程序中为移动浏览器显示不同的内容? 有时候,我们希望在Vue.js应用中为移动浏览器展示不同的内容。

18420

手势魅力-设置一个触摸菜单

-- 菜单按钮 --> <div data-link="" class="app-menu-burger OSFillParent" href="#" id="b2-Menu...触摸属性列出当前在屏幕的所有手指: PageX:返回手指放置在DOM中的x坐标。从左边开始计算,如果适用,则考虑水平滚动 PageY:返回手指放置在DOM中的y坐标。...它是从顶部边缘测量的,并考虑垂直滚动(如果适用) 而你也需要知道关于requestAnimationFrame requestAnimationFrame函数告诉浏览器你要执行一个动画。...requestAnimationFrame(updateUi); // this is what actually does the animation } // ... } 你想知道的第一件事是手势的方向 在菜单中,垂直滚动真的不是什么可以关心的东西...现在已经完成了,下一步就是计算叠加层的淡入效果 重叠计算 目标是: 当moveX = -menuWidth时,不透明度= 0 当movX = 0,不透明度= 0.5 然而,这些计算并不那么线性。

1.8K40

手写一个 OnBoarding 组件

当点击一步下一步的时候,遮罩层的宽高会变化: 加上 transition,就产生了上面的动画效果。...点击一步下一步的时候,修改 width、height、border-width,也能达到一样的效果。 比起 antd 用 4 个 rect 来实现,更简洁一些。 原理就是这样,还是挺简单的。...内部有一个 state 来记录 currentStep,点击一步下一步会切换: 在切换前也会调用 beforeBack、beforeForward 的回调。...然后加下一步下一步按钮的样式: .onboarding-operation { width: 100%; display: flex; justify-content: flex-end...然后我们在外层封装了一层,加上了一步下一步的切换。 并且用 ResizeObserver 在窗口改变的时候重新计算 mask 样式。

9610

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

我们需要滑动滚动条来查看完整的视图,这个时候scrollLeft 和scrollTop就出现了,其实实际项目中我们是需要用到client和scroll这两大属性来自动的滑动滚动条,比如来新消息的时候,滚动条自动往下滑动到底部以便查看新消息...这是着重讲scroll,理解清楚了再进行下一步。...scrollLeft的概念是返回元素左边缘与视图之间的距离,我们一步一步的理解,首先,如上图所示,当我们没有滑动水平滚动条时,元素与它的内容默认是左上角顶点重合的,所以他们之间是没有距离的,此刻的 scrollLeft...当我们拉动水平滚动条时,元素与视图就不再是左上角顶点重合了,水平之间是存在距离的(按左上角顶点重合计算),可以看到现在的scrollLef有了数值,因为没有移动垂直滚动条,因此垂直方向仍然是没有距离的。...当我将水平,垂直滚动条都拉到底部时,scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ,我设置的元素宽高分别为:200 180 ,视图(子元素)宽高分别为:300 320

2.4K40

利用这个css属性,你也能轻松实现一个新手引导库

相信大家或多或少都在各种网站上使用过新手引导,当网站提供的功能有点复杂时,这是一个对新手非常友好的功能,可以跟随新手引导一步一步了解网站的各种功能,我们要做的只是点击下一步或者一步,网站就能滚动到指定位置...切换步骤 接下来,我们创建一个新元素用来存放信息和一步下一步按钮: class NoviceGuide { constructor(options) { // ......div> 一步 下一步...,然后监听一下点击事件,判断点击的是一步还是下一步,补充一下一步和结束的逻辑: class NoviceGuide { prev() { if (this.currentStepIndex...如果目标元素位于可滚动元素内 这个问题是什么意思呢,比如我们想高亮下图中红框内的元素: 它所在的可滚动父元素并不是document.body,事实这个页面body元素压根无法滚动,宽高是和窗口宽高一致的

37130

零基础入门 23: UGUI ScrollView

那么如何在Unity里制作一个ScrollView呢?有如下两种方式。 今天会使用这俩种方式来为大家制作一个滚动视图。...因为我准备为大家制作一个垂直滚动视图作为示例,所以这里我增加了一个垂直的布局组件。 ?...下一步,我修改滚动视图到合适的大小,调试大小的时候大家可以把mask标记打开,方便调整,然后调试好了以后再关闭。 ? 然后我们来修改一下滚动视图内容的父节点的大小。...因为我们要创建的是垂直的,所以在ScrollRect组件把水平滚动去掉。 ? 此时我们运行项目,来查看一下效果。顺便在运行中,我又复制了几个图片,来穿插显示,这样更能体现出我们滚动视图的显示。 ?...掌握了上面第一种方式,再用第二种的时候就会特别的简单,接下来就是老路子了,Unity的这个空间为我们创建好了Content节点,关联关系也不需要我们去操心,那我们就在Content增加垂直的布局组件,

3K20

面试题必备-web页面基础

onblclick: 当元素发生鼠标双击时触发 onmousedown:当元素按下鼠标按钮时触发 onmousemove:当鼠标指针移动到元素触发 onmouseout:当元素指针移出元素时触发...盒子 俗称盒子,division分割 在网页制作过程中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就是相当于一个容器。...什么是逻辑部分,它是页面上相互关联的一组的元素,网页中的独立的栏目版块,就是一个典型的逻辑部分。...网页由上到下,由内到外 div,header,footer,nav,article,aside等标签多用于模块划分 css全称为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,文字的大小,...vertical-align baseline默认 sub垂直对齐文本的下标 super垂直对齐文本的上标 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐

2.4K10

scrollwidth和clientwidth_vue监听页面滚动

event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量   以上主要指IE之中,FireFox差异如下: IE6.0、FF1.06+: clientWidth...,clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远...,滚动条移动 点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.7K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券