0

I am using a jquery plugin nicescroll I am loading different pages via iframe to a section of the div (i have to use iframes to sandbox the iframe content )

I have created this small page and i am having two issues?

1) if i try to scroll by touching the iframe content nothing moves, i have to touch outside the iframe to scroll it

2) it scrolls very slow and uneven.

I have hardcoded the width to work on the scrolling. I am going to have to resize the width after load once i have this initial problem fixed.

Thanks for any help

This is the simple page

<!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>
randy
  • 1,685
  • 3
  • 34
  • 74

1 Answers1

0

In regards to question no1, have you tried the niceScroll option oneaxismousemode:false So something like this:

$(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. It may help to post an example link

Gmodal
  • 73
  • 7