日常掉坑记

日常掉坑记

npm 清除缓存

npm clean cache -f

npm cache clean --force

1. scrollIntoView

该方法可以很好的解决页面内锚点跳转，不用在url里加#锚点

在QQ浏览器下会无法滚动到指定锚点, 在有些版本的Chrome里也会遇到

const element = document.getElementById('box');
element.scrollIntoView({behavior: "smooth"});

去掉{behavior: "smooth"}可以正常滚动

解决方案

const button = document.querySelector('#box');
window.scrollTo({
    top: button.offsetTop,
    left: 0,
    behavior: 'smooth'
});

经测试，在IE和UC中这个方法也不好使。 所以最终方案是

const element = document.getElementById('box');
element.scrollIntoView();

缺点是没有动画效果。 可以根据兼容性要求来选择方案。

Clipboard

触发事件的元素一定要用button才能生效。

视频播放到最后一帧黑屏

经测试，是视频本身黑屏

浏览器用window.innerWidth 为1280，为何浏览器截图为1920， 因为电脑设置了显示比例。150%，所以会出现显示异常。

背景透明不要用opacity，要用rgba() 用opacity会导致背景透明文字也透明。

背景透明，文字也透明解决办法

设置z-index失效， 发现在容器中可用，position absolute离开容器后就看不到了，

原因： 父容器设置了overflow:hidden, 所以如果要移到合适的位置，需要把合适的位置也放到父容器中。

bootstrap每列之间没有间隔，看起来中间有间隔，点击的时候还是会触发点击事件，

解决办法： 把绑定事件加在每列中的内容区域，而不是col-md上。

form表单提交文字带图片

1. 如图片是单独的字段，没有问题{'pic':url, text: ''}
2. 如果是富文本？文字图片混在一起，怎么处理。 答案：在富文本编辑器里，上传图片会要求配置上传图片路径，放入的图片会先上传返回图片地址。

2018-7-11 16:31:43

滚动条吸顶效果经验总结

var menu= document.getElementById("nav");
//获取距离页面顶端的距离
var titleTop = menu.offsetTop;
//滚动事件
window.addEventListener("scroll", function() {
    var btop = document.documentElement.scrollTop || document.body.scrollTop;

    //如果滚动距离大于导航条据顶部的距离
    if(btop > titleTop) {
        //为导航条设置fix
        $(".nav").addClass("fixed")
    } else {
        //移除fixed
        $(".nav").removeClass("fixed")
    }
});

为了减少页面重绘次数增加延时功能

function callback(){
    //do something
    console.log('scroll once..');
}

var timeoutRef;
window.addEventListener('scroll' , function(){
    if(timeoutRef){
        clearTimeout(timeoutRef);
    }
    timeoutRef = setTimeout(callback , 50);
})

如果要吸顶的元素在页面中间，会造成页面抖动， 需要吸顶的元素设置position:fixed后移到顶部造成页面高度发生变化重新触发scroll方法，

解决办法： 将需要吸顶的元素父容器设定最小高度，即使位置发生移动，也有固定高度在，不会触发scroll方法。