随身笔记

作者： admin

  • css3 具有滚动条特性同时又隐藏滚动条

    手机 css 滚动条 隐藏 水平移动

    由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器
    ::-webkit-scrollbar。

     

    关于这个选择器的介绍可以参考：
    Styling Scrollbars
    Custom Scrollbars in WebKit

     

    移动端：

    直接在出现滚动条的容器添加以下属性
/* for Chrome */
.inner-container::-webkit-scrollbar {
   display: none;
}

     

    pc端：

    如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

    html:

    <div class="outer-container">
 <div class="inner-container">
  <div class="content">
    ......
  </div>
 </div>
</div>

     

    css:

    .outer-container,.content {
 width: 200px; height: 200px;
}
.outer-container {
 position: relative;
 overflow: hidden;
}
.inner-container {
 position: absolute; left: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}

 /* for Chrome */
.inner-container::-webkit-scrollbar {
 display: none;
}

     

    https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html

  • 关于苹果手机iPhone使用iframe不能识别width=device-width

    iframe 苹果 iphone meta width=device-width

    在开发手机页面时，我们都会在头部添加一句话：

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    但是我偶然使用iframe调用其他页面时，在iPhone上貌似不能识别上面一句话，安卓的没问题。

     

    解决办法：

    iframe {
 min-width: 100%;
 width: 100px;
 *width: 100%;
}

     

    在iframe上添加：(红色部分必加)

    <iframe class="block" src="./pic.html" scrolling="no" frameborder="0" width="100%" onload="$(this).css({height:$($(this)[0].contentDocument).find('body').height()})"></iframe>

     

    文章来源：http://stackoverflow.com/questions/20123960/how-to-get-iframe-width-100-in-iphone-portrait-view

  • js 扩展运算符号 …

    在es6中提供一个关键词… ，效果类似把一个整体的数组扩展出来，并且显示出所有的成员。

    例子：

    用法一：将数组展开

    var array = [1,2,3,4,5,6,7];
 console.log(array);     //输出 [1, 2, 3, 4, 5, 6, 7]                   
 console.log(...array);  //输出 1 2 3 4 5 6 7

     

    用法二：合并数组

    function func(a, ...rest) {
 console.log(a)
 console.log(rest)
}
func(1)  //1  []
func(1, 2, 3, 4)  //1  [2,3,4]

    在没有第二个参数时，默认返回一个空数组；

    当有参数时，默认将剩下的元素合并成一个数组

     

     

    跟Generator 函数配合使用

    作用可以是，将多个数组合并成一个数组

    var go = function*(){
 yield 1;
 yield 2;
 yield* [3,4];
};

 console.log( [...go()] );  //[1, 2, 3, 4]

     

     

  • es6中的yield*用法

    let generator = function* () {   //这里的*不加就会报错,这种声明方法就是generator函数
 yield 1;
 yield* [2,3,4]; //在数组前加* 遍历所有元素，不加* 直接遍历整体
 yield 5;
 yield {name:'123',num:123};
};

 var iterator = generator();  //generator返回的是Iterator对象，所以调用时候要使用next()

 console.log( iterator.next() )// { value: 1, done: false }
 console.log( iterator.next() ) // { value: 2, done: false }
 console.log( iterator.next() )// { value: 3, done: false }
 console.log( iterator.next() )// { value: 4, done: false }
 console.log( iterator.next() )// { value: 5, done: false }
 console.log( iterator.next() )// { value: {name:'123',num:123}, done: false }
 console.log( iterator.next() )// { value: undefined, done: true }

    主要的作用就是遍历比较复杂的数据结果

  • js箭头函数=>，解决this指向问题

    在js看到=>，如果没接触过Php或者类似的语言，估计会懵逼。

    这个是es6的语法特性，主要是明确了this指向问题。直接来一个例子方便理解：

    $('#bt1').click(function () {
 console.log($(this));   //这里的this，是#bt1本身，这个我们不难理解 
});

     

    $('#bt1').click(function () {
 setTimeout(function () {
   console.log($(this));  //这里的this,指向的是window。不是我们预期想要的结果
 },100)
});

     

    重点来了

    $('#bt1').click(function () {
 setTimeout(()=>{
   console.log($(this))  //这里的this,又重新指向了#bt1本身
 },100)
});

    除了用箭头函数的方法还有两个方法可以实现

    $('#bt1').click(function () {
 setTimeout(function () {
    console.log($(this));
 }.bind(this),100)
});

     

    用jquery里面提供的方法$.proxy

    $('#bt1').click(function () {
 setTimeout($.proxy(function () {
   console.log($(this));
 },this),100)
});