JQuery Div層滾動條控制（模擬橫向滾動條在最頂端顯示）

本文轉載自查看原文 2013-08-03 01:06 6371 HTML Dom JQuery/ JQuery

想讓DIV層滾動條顯示在頂端，CSS樣式沒找到相關屬性，於是用2個DIV層來模擬做了一個。
經測試IE瀏覽器上顯示並不太美觀！不知道是否還有更好的辦法可以實現這功能呢？

aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#div2").css("overflow-x", "scroll").height(16).width($("#div1").width()+20); //設置一個高度10的DIV2層 長度與DIV1層一致
            $("#div2").html($("#div1").html()); //並給DIV2層填充內容

            $("#div2").scroll(function () {
                $("#div1")[0].scrollLeft = $("#div2")[0].scrollLeft; //拉動DIV2層滾動條，DIV1層滾動條同步被改變
            });
        });
    </script>
</head>
<body>
<p></p>
<div id="div2"></div>
<div id="div1" style="border-style: solid; border-width: 1px; border-color: inherit; width:150px; height:120px; overflow-x:scroll; ">
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery控制div層的滾動條始終顯示在最底部 div模擬滾動條 DIV模擬滾動條給div添加橫向的滾動條 jQuery---鼠標滾輪控制div橫向滾動條左右移動 jquery ui 插架之 dataTable 顯示橫向滾動條 DIV滾動條功能整合（一）：滾動條的變相隱藏、js控制div的漸變顯示、滾動條監聽 jQuery控制頁面滾動條上下滾動模擬滾動條