Question

我在使用webkit浏览器中的select输入时使用jquery时遇到了一些麻烦。

我有一个标准的HTML选择输入，其中填充了从php中的数据库中检索到的数据，如下所示：

<select id="select_menu">  
foreach($all_sections as $key => $value) {
            $menu_element = $options['menu_element_'.$key.''];
            $menu_text = $options['menu_text_'.$key.''];
                if ($menu_element == "1") {
                    echo '<option class="select_menu_link" value="#'.$key.'">'.$menu_text.'</option>';  
                }   
        }
</select>

现在，我写了一个简单的脚本，它获取每个选项的值并使用它滚动到该特定元素（使用jquery ScrollTo库）。

<script>
    $('.select_menu_link').click(function(){
        var target_name = $(this).attr("value");
        target_offset_top = $(target_name).offset().top;
        target_position = target_offset_top - 100;  
        $('html,body').scrollTo( {top: target_position, left:'0'}, 450 );
    });
</script>

此代码在Firefox和IE上完美运行：当用户点击选择输入的选项时，网站会滚动到该点。但是，它在Chrome和Opera上没有任何结果。你知道为什么吗？任何输入（没有双关语）都会非常感激！

Answer 1

从this post开始，Webkit浏览器似乎修改了body / scrollTop的{{1}}。最好的建议是将所有内容放入包装器中并使用它：

scrollLeft

然后使用<html> <body> <div id="WrapAll">  </div> </body> </html>函数：

scrollTo

或者我们可以将其清理为非常高效，不需要$('.select_menu_link').click(function(){ var target_name = $(this).attr("value"); target_offset_top = $(target_name).offset().top; target_position = target_offset_top - 100; $('#WrapAll').scrollTo( {top: target_position, left:'0'}, 450 ); });插件，并符合标准（设置更改ScrollTo而不是点击select）：

option

在Webkit浏览器中选择输入和Jquery脚本

1 个答案: