前端

最新推荐文章于 2024-09-30 15:42:36 发布

chuchun4342

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量90

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/u/3482593/blog/1540924

版权

百度地图第三方接口pc端的地址：

http://map.baidu.com/?latlng=34.507327,109.479665&title=标题&content=介绍&autoOpen=true&l

实现html的table滚动条，根据table的高度和宽度进行自适应，html标签如下：

<div class="result_wrap">
         <!-- BEGIN PORTLET-->

         <div style="height: 20px; overflow: hidden; overflow-x: scroll; position: fixed; bottom: 0px; z-index: 1000;">
        <div id="customerScrollBody" style="height: 100px;"></div>
         </div>

       <div style="overflow-x: scroll; ">

        <table class="result" style="margin-bottom: 0px; width: 100% !important;" id="customerList">
          
       </table>
</div>

js代码是这样的，直接用就可以：

 // 处理滚动。
    var $customerScrollBody = $('#customerScrollBody');
    var $customerList = $('#customerList');
    var $customerScrollBodyParent = $customerScrollBody.parent()
    var $customerListParent = $customerList.parent();
    var $window = $(window);
    $window.resize(function() {
        $customerScrollBodyParent.width($customerListParent.width());
        $customerScrollBody.width($customerList.width());
        $window.trigger('scroll');
    }).trigger('resize');
    $window.scroll(function() {
        var scrollTop = $window.scrollTop();
        var clientHeight = document.documentElement.clientHeight > 0 ? document.documentElement.clientHeight : document.body.clientHeight;
        var offsetTop = $customerList.offset().top;
        var outerHeight = $customerListParent.outerHeight();
        if ((offsetTop + outerHeight) > (scrollTop + clientHeight)) {
            $customerScrollBodyParent.show();
            $customerScrollBodyParent.scrollLeft($customerListParent.scrollLeft());
        }
        else {
            $customerScrollBodyParent.hide();
        }
    }).trigger('scroll');
    $customerScrollBodyParent.scroll(function() {
        $customerListParent.scrollLeft($customerScrollBodyParent.scrollLeft());
    });

转载于:https://my.oschina.net/u/3482593/blog/1540924