संलग्न डिव

स्क्रॉल नहीं कर सका Google क्रोम में मैं एक div जोड़ता हूं। जब मैं बटन पर क्लिक करता हूं तो लाल div स्लाइड हो जाएगा लेकिन यह माउस व्हील के साथ स्क्रॉल नहीं कर सकता है।संलग्न डिव

बग केवल Google क्रोम में होता है।

यह एक उदाहरण पृष्ठ है: http://infinitynewtab.com/question/test.html

HTML, सीएसएस और जे एस:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

<style type="text/css"> 
    body{ 
     margin: 0px; 
     overflow: hidden; 
    } 
    #right{ 
     width:350px; 
     height:100%; 
     position: absolute; 
     top:0px; 
     right:-350px; 
     background-color: red; 
     overflow-y:scroll; 
    } 
    #button{ 
     width:180px; 
     height:40px; 
     padding: 5px; 
     background-color:rgb(75, 197, 142); 
     margin-top: 200px; 
     margin-left: auto; 
     margin-right: auto; 
     color:#fdfdfd; 
     border-radius: 10px; 
     cursor: pointer; 
    } 
    @-webkit-keyframes slideOut{ 
     0% { 
      transform:translate(0px); 
      -webkit-transform:translate(0px); 
     } 
     100% { 
      transform:translate(-350px); 
      -webkit-transform:translate(-350px); 
     } 
    } 
    .slideOut{ 
     animation:slideOut ease 0.3s; 
     -webkit-animation:slideOut ease 0.3s; 
     transform:translate(-350px); 
     -webkit-transform:translate(-350px); 
    } 
</style> 
</head> 
<body> 
<div id="button">Click me,then scroll in the red area</div> 
<script src="jquery2.1.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var str=''; 
     for (var i = 0; i <10000; i++) { 
      str+=i+'<br>'; 
     }; 
     $('body').append('<div id="right">'+str+'</div>'); 
    }); 
    $("#button").on('click',function(event) { 
     /* Act on the event */ 
     $('#right').addClass('slideOut'); 
    }); 
</script> 
</body> 
</html>

स्रोत

2014-12-18 Sam Liu

माउस चाल स्क्रॉल पर? –

क्रोम में काम करता है 39.0.2171.95 – Turnip

मेरी अंग्रेजी बहुत अच्छी नहीं है, मेरा मतलब है कि यह लाल div –

आप स्क्रॉल करने के लिए 100% करने के लिए div की ऊंचाई निर्धारित नहीं करते पेज चाहते हैं। जिस तरह से आपने इसे कार्यान्वित किया है, आप केवल div को ध्यान में रखकर स्क्रॉल कर सकते हैं। यह एक बग नहीं है ...

स्रोत

2014-12-18 12:30:45 navotgil

मैं चाहता हूं कि लाल div स्क्रॉल कर सके, मैंने div ऊंचाई को 600px पर सेट किया है, लेकिन यह अभी भी स्क्रॉल नहीं कर सकता है। लेकिन यह स्क्रॉल कर सकता है यानी: [link] (http://infinitynewtab.com/question/test.html) –

ऑटो को – navotgil

पर सेट करें क्षमा करें, मेरी अंग्रेजी अच्छी नहीं है, मैं क्या कहना चाहता हूं, पृष्ठ स्क्रॉल नहीं करता है, लेकिन div में सामग्री स्क्रॉल कर सकती है। –

आप बिल्ली की कोशिश यह है कि यह

सीएसएस इस

#right{ 
z-index:2; 
} 
#button{ 
z-index:1; 
}

लाइव Demo

स्रोत

2014-12-18 13:18:54

समस्या slideOut साथ है की तरह के रूप में जेड सूचकांक जोड़ने में मदद है हो सकता है कक्षा। यकीन नहीं है कि क्यों। लेकिन यह काम करता है:

.slideOut{ 
     -webkit-transition: all .3s ease-in; 
     -moz-transition: all .3s ease-in; 
     -ms-transition: all .3s ease-in; 
     transition: all .3s ease-in; 
     right: 0 !important; 
    }

स्रोत

2014-12-18 14:01:54

संलग्न डिव

उत्तर

संबंधित मुद्दे