javascript - How do I control the speed of animated scrolling? -


i trying this:

$(function() {    $(".prev").mouseover(function() {      $("#scrollpane").animate({        "scrolltop": 0      }, 1000);    }).mouseout(function() {      $("#scrollpane").stop();    });    $(".next").mouseover(function() {      $("#scrollpane").animate({        "scrolltop": $("#scrollpane .wrap").height()      }, 1000);    }).mouseout(function() {      $("#scrollpane").stop();    });  });
* {    margin: 0;    padding: 0;    list-style: none;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    line-height: 1;  }    body {    margin: 15px auto;    width: 450px;  }    #scrollpane {    padding: 10px;    max-height: 250px;    overflow: hidden;    background-color: #fff;  }    #scrollpane p {    margin: 0 0 10px;    text-align: justify;  }    .button {    display: block;    background-color: #ccf;    border-radius: 10px;    cursor: pointer;    text-align: center;    font-size: 0.75em;    padding: 0 0 1px;  }
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  <div class="button prev">    <i class="fa fa-chevron-up"></i>  </div>  <div id="scrollpane">    <div class="wrap">      <p>science methodical study of nature including testable explanations , predictions. classical antiquity through 19th century, science type of knowledge more closely linked philosophy and, in fact, in        western world, term "natural philosophy" encompassed fields of study today associated science, such astronomy, medicine, , physics. however, during islamic golden age foundations scientific method laid        ibn al-haytham in book of optics. while classification of material world ancient indians , greeks air, earth, fire , water more philosophical, medieval middle easterns used practical, experimental observation classify        materials.</p>      <p>today, ever-evolving term "science" refers pursuit of knowledge, not knowledge itself. synonymous "natural , physical science" , restricted branches of study relating phenomena of material        universe , laws. although term implies exclusion of pure mathematics, many university faculties include mathematics departments within faculty of science. dominant sense in ordinary use has narrower use term "science."        developed part of science becoming distinct enterprise of defining "laws of nature"; examples include kepler's laws, galileo's laws, , newton's laws of motion. in period became more common refer natural philosophy        "natural science." on course of 19th century, word "science" became increasingly associated disciplined study of natural world, including physics, chemistry, geology , biology. left study of human        thought , society in linguistic limbo, resolved classifying these areas of academic study social science. example, psychology evolved philosophy, , has grown area of study.</p>      <p>currently, there both "hard" (e.g. biological psychology) , "soft" science (e.g. social psychology) fields within discipline. result, , consistent unfolding of study of knowledge , development of methods establish        facts, each area of psychology employs scientific method. reflecting evolution of development of knowledge , established facts , use of scientific method, psychology departments in universities found within: faculty of        arts , science, faculty of arts, , faculty of science. similarly, several other major areas of disciplined study , knowledge exist today under general rubric of "science", such formal science , applied science.</p>    </div>  </div>  <div class="button next">    <i class="fa fa-chevron-down"></i>  </div>

i trying scroll contents in smoother way possible. unfortunately, doesn't work. speed of scroll goes nuts. when hover on , down arrows, not consistent. how supposed control speed? in advance.

i have done similar respect this. let me update code in original post: scroll content on hover using jquery , mathematics behind it, have mentioned should using technique calculate speed consistent, not time. right now, time scroll consistent, wherever are, like, scrolls in single second opposite direction.

to make work correctly, need consider scrolltop , height of container. suggest change timing function way:

// top $("#scrollpane .wrap").outerheight() - $("#scrollpane .wrap").scrolltop() // bottom $("#scrollpane .wrap").height() * 2 - $(this).scrolltop()

this approximate time go , down. have changed both times 1000 above said expressions in below code. have checked works too.

$(function () {    $(".prev").mouseover(function () {      $("#scrollpane").animate({        "scrolltop": 0      }, $("#scrollpane .wrap").outerheight() - $("#scrollpane .wrap").scrolltop());    }).mouseout(function () {      $("#scrollpane").stop();    });    $(".next").mouseover(function () {      $("#scrollpane").animate({        "scrolltop": $("#scrollpane .wrap").height()      }, $("#scrollpane .wrap").height() * 2 - $(this).scrolltop());    }).mouseout(function () {      $("#scrollpane").stop();    });  });
* {    margin: 0;    padding: 0;    list-style: none;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    line-height: 1;  }    body {    margin: 15px auto;    width: 450px;  }    #scrollpane {    padding: 10px;    max-height: 250px;    overflow: hidden;    background-color: #fff;  }    #scrollpane p {    margin: 0 0 10px;    text-align: justify;  }    .button {    display: block;    background-color: #ccf;    border-radius: 10px;    cursor: pointer;    text-align: center;    font-size: 0.75em;    padding: 0 0 1px;  }
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  <div class="button prev">    <i class="fa fa-chevron-up"></i>  </div>  <div id="scrollpane">    <div class="wrap">      <p>science methodical study of nature including testable explanations , predictions. classical antiquity through 19th century, science type of knowledge more closely linked philosophy and, in fact, in        western world, term "natural philosophy" encompassed fields of study today associated science, such astronomy, medicine, , physics. however, during islamic golden age foundations scientific method laid        ibn al-haytham in book of optics. while classification of material world ancient indians , greeks air, earth, fire , water more philosophical, medieval middle easterns used practical, experimental observation classify        materials.</p>      <p>today, ever-evolving term "science" refers pursuit of knowledge, not knowledge itself. synonymous "natural , physical science" , restricted branches of study relating phenomena of material        universe , laws. although term implies exclusion of pure mathematics, many university faculties include mathematics departments within faculty of science. dominant sense in ordinary use has narrower use term "science."        developed part of science becoming distinct enterprise of defining "laws of nature"; examples include kepler's laws, galileo's laws, , newton's laws of motion. in period became more common refer natural philosophy        "natural science." on course of 19th century, word "science" became increasingly associated disciplined study of natural world, including physics, chemistry, geology , biology. left study of human        thought , society in linguistic limbo, resolved classifying these areas of academic study social science. example, psychology evolved philosophy, , has grown area of study.</p>      <p>currently, there both "hard" (e.g. biological psychology) , "soft" science (e.g. social psychology) fields within discipline. result, , consistent unfolding of study of knowledge , development of methods establish        facts, each area of psychology employs scientific method. reflecting evolution of development of knowledge , established facts , use of scientific method, psychology departments in universities found within: faculty of        arts , science, faculty of arts, , faculty of science. similarly, several other major areas of disciplined study , knowledge exist today under general rubric of "science", such formal science , applied science.</p>    </div>  </div>  <div class="button next">    <i class="fa fa-chevron-down"></i>  </div>

with above code, doing keeping content's scroll speed base , not time. time dynamically calculated in above cases based on scrolltop value of scrollpane element. hope helps.


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more