滚动条 | 易学教程

限制高度，并允许出现滚动条

.my-container{
        max-height:330px;
        overflow:auto;
    }

高度也可以用 calc() 参考 https://www.runoob.com/cssref/func-calc.html

修改原始的滚动条样式

    .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar{width:0;height:0;}
    .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-track{border-radius:5px;background:#ddd;}
    .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(153,153,153,.5);}
    .my-container::-webkit-scrollbar:hover,.pop .pop_content::-webkit-scrollbar-thumb:hover{background:rgba(102,102,102,.6);}
    .my-container::-webkit-scrollbar:active,.pop .pop_content::-webkit-scrollbar-thumb:active{background:rgba(102,102,102,.6);}

滚动

this.$nextTick(() => {
    let container = document.getElementById("my-container");
    container.scrollTop = container.scrollHeight;
});

滚动指定位置


 let container = document.getElementById("deviceInfoForm");  //容器

                let position = 0;   //要移动的位置
                let step = 15;      //每次移动的间隔
                let maxPosition = container.scrollHeight - container.offsetHeight;      //滚动条到底的位置
                let interval = 6;       //滚动时间间隔
                if (prop === 'begin') {
                    position = 0;
                } else {
                    let offsetTop = document.getElementById('series_' + prop).offsetTop;    //容器内的元素
                    position = offsetTop - 424 + 260;
                    position = Math.min(maxPosition, position);
                    position = Math.max(0, position);
                }

                let isUp = container.scrollTop > position;

                if (isUp) {
                    if (container.scrollTop <= position + step) {
                        return;
                    }
                } else {
                    if (container.scrollTop >= position - step) {
                        return;
                    }
                }

                let timer = setInterval(() => {
                    if (isUp) {
                        container.scrollTop -= step;
                        if (container.scrollTop <= position) {
                            clearInterval(timer)
                        }
                        return;
                    }
                    container.scrollTop += step;
                    if (container.scrollTop >= position) {
                        clearInterval(timer)
                    }
                }, interval);

来源：oschina

链接：https://my.oschina.net/u/2552286/blog/4340317

标签

webkit