javascript - colpick js调色板位置

Question

我已经使用 colpick.js 获得了一个调色板。当我单击 div 时，它工作正常。它打开颜色框。但是当我滚动页面时保持框打开它不会随页面滚动。它始终保持在滚动区域的位置。只是它随着卷轴上下移动。有人可以帮忙吗。

$(".colorCircle").colpick({
                color: '#212125',
                colorScheme: 'dark',
                layout: 'hex',
                submit: 0,
                onChange: function (hsb, hex, rgb, el, bySetColor) {
                    $(el).css('background-color', '#' + hex);
                    $(el).attr('colCode', '#' + hex);
                    $(el).value = "";
                }
            }).keyup(function () {

                $(this).colpickSetColor(this.value);

            });

Answer 1

在您的 colpick.css 中，确保 .colpick 类的 position 属性设置为 position: absolute; 如果没有设置它。以防万一它已经有了这个，然后检查你可能覆盖这个样式的其他 CSS 文件。

colpick 库的 .colpick 类通常如下所示，

.colpick {
    position: absolute;
    box-sizing:content-box;
    width: 346px;
    height: 170px;
    overflow: hidden;
    display: none;
    font-family: Arial, Helvetica, sans-serif;
    direction:ltr;
    background:#ebebeb;
    border: 1px solid #bbb;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    /*Prevents selecting text when dragging the selectors*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

希望这对您有所帮助!