0

我正在使用jquery 插件 nicescroll 我正在通过 iframe 将不同的页面加载到 div 的一部分（我必须使用 iframe 将 iframe 内容沙箱化）

我创建了这个小页面，但有两个问题？

1）如果我尝试通过触摸 iframe 内容进行滚动，则没有任何移动，我必须触摸 iframe 外部才能滚动它

2）它滚动非常缓慢且不均匀。

我已经硬编码宽度以进行滚动。一旦我解决了这个初始问题，我将不得不在加载后调整宽度。

谢谢你的帮助

这是简单的页面

<!DOCTYPE html>
<html>
<head>
    <title></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes,  maximum-scale=1.0, minimum-scale=1.0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
    <!-- jQuery and jQuery Mobile -->
    <script src="/inc/js/jquery-1.9.1.min.js"></script>
    <script src="/inc/js/jquery.validate.min.js"></script>
    <script src="/inc/js/jquery.cookie.js"></script>

    <script src="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <script type="application/javascript" src="/inc/js/jquery.nicescroll.min.js"></script>

    <script type="text/javascript">
          $( document ).on( "pageinit", "#test", function( event ) {    
              $("#viewportdiv").niceScroll("#wrapper");
          });
  </script>  

</head>
<body> 

<div data-role="page" id="test">

<div data-role="header">
    <h1>My Title</h1>
</div>

<div data-role="content" id="viewportdiv">  

        <div id="wrapper" style="width:1200px; height: 100%; ">
                <ul>
                        <li>
                        <iframe  id="myiframe" src="http://www.lipsum.com/feed/html"  width="1200" height="600" seamless ></iframe>
                        </li>
                </ul>
        </div>      


</div>

 </div>

 </body>
 </html>
4

1 回答 1

0

关于问题 no1，您是否尝试过 niceScroll 选项 oneaxismousemode:false 所以是这样的：

$(document).ready(function() {

    var nice = $("html").niceScroll();  // The document page (body)

    $("#div1").html($("#div1").html()+' '+nice.version);


    $(".container-horizontal").niceScroll(".content",{cursorcolor:"#000",cursoropacitymax:0.7,touchbehavior:true,oneaxismousemode:false});  


});

ps 发布示例链接可能会有所帮助

于 2013-11-19T03:59:35.320 回答