滚动条 | 易学教程

移动前端开发技巧摘录

阅读更多关于移动前端开发技巧摘录

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码； 2、 HTML5 标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5

webapp开发基础

阅读更多关于 webapp开发基础

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码； 2、HTML5标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5

移动端技巧

阅读更多关于移动端技巧

1、首先我们来看看 webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 1 <meta content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport" /> 2 <meta content= "yes" name= "apple-mobile-web-app-capable" /> 3 <meta content= "black" name= "apple-mobile-web-app-status-bar-style" /> 4 <meta content= "telephone=no" name= "format-detection" /> 　　第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；　　第二个meta标签是 iphone 设备中的safari私有meta标签，它表示：允许全屏模式浏览；　　第三个meta标签也是 iphone 的私有标签，它指定的iphone中safari顶端的状态条的样式；　　第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 2、 HTML5标签的使用　

解决移动端滚动穿透问题（兼容ios，android）

阅读更多关于解决移动端滚动穿透问题（兼容ios，android）

解决问题。网上找了一圈大多都是; overflow: hidden 页面有弹出层时将overflow: hidden样式添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案移动端根本无用！！！！，pc端也有两个缺点； 1.由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原。 2.页面的背景还是能够有滚的动的效果。方案二：touchmove + preventDefault modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); 如果是vue项目在弹层最外层父容器添加属性： @touchmove.prevent 次方案适用于你的弹层内部不需要滚动。终极方案： position: fixed 如果只是加fixed，滚动条的位置同样会丢失。所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置。 <script type="text/javascript"> //解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用 const ModalHelper = ( (bodyCls) =>{ let scrollTop; return { afterOpen: function () {

vue+elementui+table加上滚动条

阅读更多关于 vue+elementui+table加上滚动条

<el-card> <el-scrollbar style="height:100%;width: 1540px">   <el-row style="height: 600px;width: 1970px;"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-row> </el-scrollbar> </el-card> //--------------------------------- <script> export default { data() { return { tableData: [{ date: '2016-05-02'

滚动条一直置于页面底部,开发聊天程序须知。

阅读更多关于滚动条一直置于页面底部,开发聊天程序须知。

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " /> <meta name="description" content="有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。" /> <title>将滚动条（scrollbar）保持在最底部的方法

DIV Scroll属性

阅读更多关于 DIV Scroll属性

DIV Scroll属性详解，为 DIV层打造不同的滚动条。一、scrollbar属性、样式详解 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll(出现滚动条)、hidden(隐藏)、auto()浏览器自动设置)。 2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色） scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条凸出部分的颜色 scrollbar-highlight-color滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色我们通过几个实例来讲解上述的样式属性： 1.设定多行文本框的滚动条没有水平滚动条 <textarea style="overflow-x:hidden"></textarea> 没有垂直滚动条 <textarea style="overflow-y:hidden"></textarea> 没有滚动条

ElementUI的el-dialog弹窗打开时css的bug

阅读更多关于 ElementUI的el-dialog弹窗打开时css的bug

问题描述：el-dialog弹窗没打开时，页面有滚动条，会占据浏览器右侧15px左右的宽度。 dialog打开之后，遮罩层占整个浏览器的宽度，且没有滚动条。网页头部滚动条消失，导致网页头部向右移动15px左右。每次打开dialog网页头部就向右移动；关闭dialog网页头部就向左移动。直接影响美观。解决方法：在项目的入口文件添加以下css。 <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { padding-right: 15px; } } </style> 来源： CSDN 作者： Queen-Shir 链接： https://blog.csdn.net/qq_36069339/article/details/103598016

vue移动端添加加载更多

阅读更多关于 vue移动端添加加载更多

mounted () { //引入滚动方法 window.addEventListener('scroll', this.touchmove) }, methods: { touchmove(e){ //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量wndowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight; //滚动条到底部的条件 if(scrollTop+windowHeight==scrollHeight){ //写后台加载数据的函数 console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight); }} } 来源： CSDN 作者： Establish_bug

第十二周

阅读更多关于第十二周

学习总节：一，其他容器： 1,JPanel 在JPanel中可以加入任意的组件，然后直接将JPanel容器加入到JFrame容器中即可显示。作用：完成各种复杂的界面显示。常用方法：方法类型描述 public JPanel() 构造创建一个默认的JPanel对象，使用流布局管理 public JPanel(LayoutManager layout) 构造创建一个指定布局管理器的JPanel对象 2,JSplitPane 作用：分割面板，将一个窗体封为两个窗体，可以水平排列或垂直排列常用方法及常量方法及常量类型描述 public static final int HORIZNTAL_SPLIT 常量表示水平分割 public static final int VERTICAL_SPLIT 常量表示垂直分割 public JSplitPane(int newOrientation) 构造创建对象，并指明分割方式 public JSplitPane(int newOrientation,boolean newContinuousLayout,Component newLeftComponent,Component newRightComponent) 构造创建对象，指明分割方式，分割条改变是否重绘图像及两端的显示组件 public void

订阅滚动条