FireFox의 slimScroll.js + iframe 문제

iframe을 사용하여 콘텐츠를로드 할 때만 FireFox의 slimScroll/jQuery UI에 문제가 발생합니다. 코드는 다른 모든 브라우저에서 정상적으로 작동합니다.FireFox의 slimScroll.js + iframe 문제

iframe을 정상적으로로드하면 정상적으로 작동합니다. (.hide() 또는 display : none;으로 시작하도록 숨겨져있는 경우) 여전히로드되지만 slimScroll 드래그 가능 막대는 표시되지 않습니다 (레일 만 있음).

나는 FireFox 스크롤 문제이거나 jQuery UI draggable 문제라고 생각합니다. 어쨌든, 나는 그것을 이해할 수 없다.

스크립트가 상위 페이지에 넣어 (parent.html) :

<a href="#" id="showtip">Click to Show Iframe</a>

콘텐츠 페이지 스크립트 (content.html :

 $(document).ready(function() { 
     var tip = $('<div id="tip" style="position:absolute;top:90px;left:190px;height:120px;' + 'width:275px;border:1px solid grey;z-index:2147483647;overflow:hidden;">' + "<iframe frameborder='0' scrolling='no' src='content.html' width='275px' height='120px' id='myiframe' type='content' style='display:block;visibility:visible'></iframe>" + '</div>'); 
     $('body').prepend(tip); 
     $('#showtip').click(function (event) { 
      $('#tip').show(); 
     }); 
     $('#tip').hide(); //comment this line out and it works correctly... 
     });

부모 페이지는 iframe을 보여줍니다 링크가) :

$(document).ready(function() { 
    $('#scroll').slimScroll({ 
     height: 95, 
     railVisible: true, 
     alwaysVisible: true, 
     allowPageScroll: false 
    });  
});

content.html에 대한 더미 내용 :

,536,913 필요한 63,210

<div id="scroll">This is the iframe content area <p>This is the iframe content area</p> p>This is the iframe content area</p> <p>This is the iframe content area</p> </div>

JS 참조 : 그것 뿐이다

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script> 
<script type="text/javascript" src="https://raw.github.com/rochal/jQuery-slimScroll/master/slimScroll.min.js"></script>

출처

2012-10-26 Marc M

일반적으로 모든 jQuery 스크롤 막대는 적용되는 컨테이너의 높이/너비를 계산하여 스크롤 막대를 그 위에 배치합니다.

jQuery에서 hide()를 수행하면 display:none이되고 요소는 전혀 렌더링되지 않으므로 자체 높이/너비가 없습니다. 따라서 슬림 스크롤을 보지 못합니다. (다른 jQuery 스크롤과 비슷한 문제를 발견 할 것이다.)

상황을 극복하기 위해 다시 숨긴 후 $('#scroll').slimScroll()으로 전화하십시오. 이 경우 iframe이 동일한 도메인에있는 경우에만 가능합니다.

아니면 더 좋은 방법은, 대신 ('# 팁') $를 사용

$('#tip').css('visibility','hidden'); 및 $('#tip').css('visibility','visible');

출처

2012-11-04 06:40:09 Jashwant

를 사용 hide()를 사용 해달라고 CSS를 ('가시', '숨겨진.'); $ ('# myiframe') .css ('visibility', 'hidden'); 트릭을하는 것처럼 보인다, 고마워! –

나는 프레임이 몸에 추가하지만, DOM과 바인딩 할 수 없습니다, 당신은 document와 iframe을 결합해야하며,

$("#showtip").live('click',function(){ 

    //use .live instead of `click` 
});

이해 희망 시도라고 생각합니다.

출처

2012-11-04 03:14:24 Rajnish

FireFox의 slimScroll.js + iframe 문제

답변

관련 문제