怎样把滚动条放到容器上方 - css、html

兼容ie9以上
  <head>
        <title></title>
        <style type="text/css">
        #bar {
            width: 500px;
            height: 300px;
            overflow-x: auto;
            /*容器div沿x轴翻转180度（把滚动条放到上方），沿y轴翻转180度 rotateY(180deg)（把滚动条留在右方）*/
            transform: rotatex(180deg);
        }

        #content {
            width: 600px;
            height: 500px;
            /*容器翻转之后内容也翻转了，所以要翻回来*/
            transform: rotatex(180deg);
        }
        </style>
    </head>

    <body>
        <div id="bar">
            <div id="content">
                dfjsklfjsdl
            </div>
        </div>
    </body>
    <script type="text/javascript">
    document.getElementById("bar").scrollTop = document.getElementById("bar").clientHeight;//让滚动条默认滚动底部
    // document.getElementById("bar").scrollLeft = document.getElementById("bar").clientWidth;//让滚动条默认滚动最右
    </script>