Question

我有一个div，里面这个div是一个名为color的单选按钮组。当用户选择特定颜色时，背景会变为所选颜色。

HTML：

<div>
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label><br>
    <input type="radio" name="color" value="red" id="red"><label for="red">Red</label><br>
    <input type="radio" name="color" value="green" id="green"><label for="green">Green</label><br>
    <input type="radio" name="color" value="orange" id="orange"><label for="orange">Orange</label><br>
    <input type="radio" name="color" value="yellow" id="yellow"><label for="yellow">Yellow</label><br>
    <input type="radio" name="color" value="pink" id="pink"><label for="pink">Pink</label><br>
    <input type="radio" name="color" value="gray" id="gray"><label for="gray">Gray</label><br>
    <input type="radio" name="color" value="magenta" id="magenta"><label for="magenta">Magenta</label<br>
    <input type="radio" name="color" value="teal" id="teal"><label for="teal">Teal</label><br>
    <input type="hidden" value="" id="color_selected"/>
</div>

CSS：

div {
    border: 1px solid;
    width: 100px;
    height: 100px;
    overflow: scroll;
    overflow-x: hidden;
}

input {
    position: absolute;
    left: -1000px;
}

jQuery的：

$(document).ready(function() {
    $('input[name="color"]').change(function() {
        var prevColor = $('#color_selected').val();
        if (prevColor) {
            $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
        }
        var color = jQuery(this).val();
        $(this).next('label').css({'background':color});
        $('#color_selected').val(color);
    });
});

JSFIDDLE

这个div也有一个设定的宽度和高度。我设置了溢出滚动所以可以看到所有颜色。我的问题在于滚动，因为当使用箭头键选择颜色时它不起作用。

如果选择“黄色”后的任何颜色，则div不会向下滚动。滚动有没有办法跟随选定的颜色？

Answer 1

有一种方法，scrollIntoview()：

 $(this).next('label').css({'background':color}).get(0).scrollIntoView(false);

DEMO

Answer 2

我认为输入元素不会自动滚动，因为它们具有absolute定位。

您可以通过调用scrollIntoView()来自行滚动元素。

$(this).next('label')[0].scrollIntoView();

但是scrollIntoView()有它的缺点。如果您传递true（默认值），元素将滚动，以便它们与顶部对齐。当您从顶部元素向下箭头时，这可能无法正常工作。如果你传递它false，元素将滚动，以便它们与底部对齐。当您从底部元素向上箭头时，这可能无法正常工作。

jsfiddle

Answer 3

使用scrollTop方法

$(document).ready(function() {
    $('input[name="color"]').change(function() {
        var prevColor = $('#color_selected').val();
        if (prevColor) {
            $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
        }
        var color = jQuery(this).val();
        $(this).next('label').css({'background':color});
        $('#color_selected').val(color);

        var xPosition = ($(this).index() /3)*15; 
        $("#scrolldiv").scrollTop(xPosition);

    });
});

<div id="scrolldiv">
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label><br>
    <input type="radio" name="color" value="red" id="red"><label for="red">Red</label><br>
    <input type="radio" name="color" value="green" id="green"><label for="green">Green</label><br>
    <input type="radio" name="color" value="orange" id="orange"><label for="orange">Orange</label><br>
    <input type="radio" name="color" value="yellow" id="yellow"><label for="yellow">Yellow</label><br>
    <input type="radio" name="color" value="pink" id="pink"><label for="pink">Pink</label><br>
    <input type="radio" name="color" value="gray" id="gray"><label for="gray">Gray</label><br>
    <input type="radio" name="color" value="magenta" id="magenta"><label for="magenta">Magenta</label<br>
    <input type="radio" name="color" value="teal" id="teal"><label for="teal">Teal</label><br>
    <input type="hidden" value="" id="color_selected"/>
</div>

updated fiddle

当在div中选择不同的值时，为什么不滚动条更改？

3 个答案: