julytian / h5skills Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 0 B

整理记录和收集平时h5技巧与分享

h5skills's People

Contributors

Watchers

h5skills's Issues

-webkit-overflow-scrolling:touch属性

1、在非body元素，添加这个属性，竟然没有效果。如果添加上overflow-y: scroll,就可以优雅的滚动起来了。
2、当一个元素设置过position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值就可以了。
解决方法：
给元素增加个z-index值

webkit-overflow-scrolling: touch;
position:relative;
z-index:1;

QQ内置浏览器出现了不可预见的bug：向下/向上快速滑动页面的时候，页面会出现空白，等滑动结束后内容显示；安卓无此问题。
解决方法: 在滑动范围的父级添加以上css，即可解决；

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

参考地址

阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）

地址

egg.js框架之egg-sequelize时差问题

/* egg-sequelize */
exports.sequelize = {
    dialect: 'mysql',
    database: '',
    host: '',
    port: '',
    username: '',
    password: '',
    timezone: '+08:00' //东八时区
};

解决 Android 浏览器下 line-height 垂直居中偏离问题

结合行高、对齐的关系，结合伪元素得出的黑科技，亲测效果很理想。

.btn::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: 1px;
}

前端业务代码工具库

使用 :not() 简化样式

MDN用法

一般我们写一个导航条，每个导航之间都设置空隙（除了最后一个），代码以下：

<div class="navbar">
    <a href="#">首页</a>
    <a href="#">关于我们</a>
    <a href="#">个人中心</a>
    <a href="#">联系我们</a>
</div>

.navbar a {
    margin-right: 10px;
}
.navbar  a:last-child {
    margin-right: 0;
}

看起来总觉得很别扭，现在可以使用 :not() 来简化样式

.navbar a:not(:last-child) {    /* 除了最后一个 */
    margin-right:  20px;
}

表单样式美化

修改 iOS 下 input disabled 颜色

input:disabled {
    -webkit-text-fill-color: #ddd;
}

设置 input 标签 placeholder 属性的样式

.example::-webkit-input-placeholder {
    color: red;
}

取消 input 默认样式

input {
    border: none;
    background: none;
    appearance: none;
    border-radius: 0;
}

取消点击 a、button、input 标签后区域半透明遮罩

a, button, input {
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

关闭 iOS 默认输入法首字母大写

<input type="text" autocapitalize="off">

文本溢出省略号小技巧

单行文字超出省略号

.text{
    width:  100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-scaple: nowrap;
}

多行文字超出省略号

.text{
    width: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* 超过3行就显示省略号 */
    text-overflow: ellipsis;
    overflow: hidden;
}