Question

我正在使用a jquery plugin 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>

Answer 1

关于问题1，您是否尝试过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});  


});

P.S。发布示例链接可能会有所帮助

jquerymobile nicescroll试图让水平滚动与iframe一起使用

1 个答案: