Open wolichuang opened 3 years ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> header { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; line-height: 50px; font-size: 18px; text-align: center; background: #ccc; } main { position: absolute; top: 50px; bottom: 0; width: 100%; margin-bottom: 50px; overflow-y: scroll; /*让滑动更流畅*/ -webkit-overflow-scrolling: touch; } footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #666; border-top: 1px solid #e6e6e6; } footer input { display: inline-block; width: 90%; height: 20px; font-size: 14px; outline: none; border: 1px solid #e6e6e6; border-radius: 5px; } </style> </head> <body> <header>header</header> <main> <ul> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>1</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>1</li> <li>12</li> <li>13</li> </ul> </main> <footer> <input type="text" placeholder="Type here..." /> </footer> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script type="text/javascript"> var timer = null; $(function () { $('input').on('focus', function () { $('main').on('scroll', function () { $('input').blur(); }); var target = this; clearInterval(timer); timer = setInterval(function () { target.scrollIntoView(true); }, 100); }); }); </script> </body> </html>