css - Use Skrollr on Mobile when HTML height is 100% -


i attempting use skrollr in website. works fine except on mobile. on mobile cannot scroll down page.

i have determined because have set both html , body tags have height: 100%. if remove css mobile version works fine. although css critical main website need in there. possible have keep css , have mobile version scrolling work properly?

jsfiddle

note: know make sections fixed wont work in website because there static sections in website aswell.

<!doctype html> <html> <head>     <meta charset="utf-8">      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">      <style>     html, body {          margin: 0;          padding: 0;          height: 100%;          width: 100%;      }      section {         padding: 5%;         height:100%;         background-color: red;          width: 100%;         min-height: 100%;         overflow: hidden;          display: -ms-flexbox;         display: -webkit-flex;         display: flex;          -ms-flex-align: center;         -webkit-align-items: center;         -webkit-box-align: center;         align-items: center;          vertical-align: middle;          position: relative;     }      </style> </head> <body id="skrollr-body">      <section data-0="background-color: rgb(0,0,0);" data-500="background-color: rgb(0,0,255);">         <div class="container vcenter">              <h1> vcentred long long long long long long long long long text </h1>          </div>     </section>      <section>         <div class="container vcenter">              <h1> vcentred long long long long long long long long long text </h1>          </div>     </section>      <script src="js/jquery-1.11.2.min.js"></script>     <script type="text/javascript" src="js/skrollr.min.js"></script>     <!--[if ie]>             <script src="js/skrollr.ie.min.js"></script>         <![endif]-->     <script type="text/javascript">         skrollr.init({ forceheight: false, smoothscrolling: false, mobiledeceleration: 0.004 });     </script>  </body> </html>

solution: t04435's answer worked. heres how fixed:
edit: spoke soon, works on android not on ios (iphone specifically).

@media screen , (max-width:767px){         html, body {              height: inherit;         }          section {             height:100vh;             min-height: 100vh;         } }

all need far understood set media query change html,body heigth:100% in mobiles

@media screen , (max-width:767px){     html,body{        // might need play value see        // 1 fits toe desired outcome        heigth:initial;     } }

please check @media , can right values 1 above example of need do

hope helps t04435


-

Comments

Post a Comment

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

Image
in code below when try execute main.java getting exception: exception in thread "main" org.hibernate.unknownentitytypeexception: unable locate persister: com.np.vta.test.pojo.users @ org.hibernate.internal.sessionfactoryimpl.locateentitypersister(sessionfactoryimpl.java:792) @ org.hibernate.internal.sessionimpl.locateentitypersister(sessionimpl.java:2637) @ org.hibernate.internal.sessionimpl.access$2500(sessionimpl.java:164) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2575) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2562) @ org.hibernate.internal.sessionimpl.byid(sessionimpl.java:1044) @ org.hibernate.internal.sessionimpl.get(sessionimpl.java:955) @ com.app.test.main.main(main.java:20) but if uncomment cfg.addclass( users.class ).addresource( "com/np/vta/test/pojo/users.hbm.xml" ); code works fine. why not reading <mapping...
Read more

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

i'm using (for first time) scikit library , got error: valueerror: empty vocabulary; perhaps documents contain stop words file "c:\users\a605563\desktop\velibprojetpreso\traitementtwitterdico.py", line 33, in <module> x_train_counts = count_vect.fit_transform(filetweets) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 804, in fit_transform self.fixed_vocabulary_) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 751, in _count_vocab raise valueerror("empty vocabulary; perhaps documents contain stop words but don't understand why that's happening. import sklearn sklearn.feature_extraction.text import countvectorizer import pandas pd import numpy import unicodedata import nltk tweetsfile = open('tweets2015-08-13.csv', 'r+') f2 = open('analyzer.txt', 'a') print tweetsfile.readline() count_vect = countvectorizer(strip_accents='ascii...
Read more

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -

Image
i'm trying build precimonious on ubuntu 16.04.3 x64. allocated 1gb memory it. file structure looks like ~ |--- llvm/ |--- precimonious/ where llvm on version 3.0 mentioned @ https://github.com/corvette-berkeley/precimonious#requirement . followed steps on readme command make ended with ... llvm[1]: linking debug shared library libllvm-3.0.so collect2: fatal error: ld terminated signal 9 [killed] compilation terminated. ... i went through answers online , might because there's not enough memory perform link. memory usage the gcc version on machine gcc version 5.4.0 20160609 (ubuntu 5.4.0-6ubuntu1~16.04.4) , installed via apt-get install build-essential . fresh droplet created on digitalocean btw. appreciated. it memory exhaustion. sampling interval memory measurement not small enough covers exact point oom killer kicks in. depending on container/vm technology, may able set vm.overcommit_memory=2 before build, process not killed (but doing requires m...
Read more