はjavascriptでdiv.scrollLeftを設定できません

Question

一部の入力フィールドが水平に1行に整列したフォームがあります。エラーがあった場合、エラーが発生した入力要素にスクロールしたいが、コンテナを設定できない#preferences scrollLeft。

<form id="preferences"> 
    <input type="text" value="" placeholder="" id="new_username" name="username"/> 

    <input type="text" value="" placeholder="aww:/ add an email" id="email" name="email"/> 

    <input type="password" value="" placeholder="password" id="old_password" name="password"/> 
    <input type="password" value="" placeholder="new password" id="new_password" name="new_password"/> 

    <input type="submit" value="update"> 
</form> 

#preferences { 
    text-align: center 
    margin: 10px 0; 
    white-space: nowrap; 
    overflow-x: auto; 
} 

var email = document.getElementById('email'), 
    preferences = document.getElementById('preferences'); 

preferences.scrollLeft = email.offsetLeft; 

Answer 1

コンテナー（フォーム）が定義された幅を有していないので、それだけ、横方向に膨張します。オーバーフローしていないため、スクロールできません。ただし、幅が固定されているか、本体であれば親をスクロールできます。

参照：

preferences.scrollLeft = 250; //it works...

#preferences { 
 
    text-align: center 
 
    margin: 10px 0; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
    width: 300px; /*if you set the width*/ 
 
}

<form id="preferences"> 
 
    <input type="text" value="" placeholder="" id="new_username" name="username"/> 
 

 
    <input type="text" value="" placeholder="aww:/ add an email" id="email" name="email"/> 
 

 
    <input type="password" value="" placeholder="password" id="old_password" name="password"/> 
 
    <input type="password" value="" placeholder="new password" id="new_password" name="new_password"/> 
 

 
    <input type="submit" value="update"> 
 
</form>