我有一个菜单div,设置为在点击汉堡菜单时显示。我不确定如何应用CSS / JS,这也允许我在单击打开/关闭时停止滚动。
目前,用户可以向下滚动并丢失汉堡关闭按钮,因为它们可以自由滚动。有关如何执行此操作的任何想法以及如何应用代码来说出我的汉堡菜单,例如下面:
class Eapproximator
var step : F64
new create(step' :F64) =>
step = step'
fun evaluate() :F64 =>
var total = F64(0)
var value = F64(1)
while total < 1 do
total = total + step
value = value + (value * step)
end
value
actor Main
new create(env: Env) =>
var e_approx = Eapproximator(0.00001)
var e_val = e_approx.evaluate()
env.out.print(e_val.string())
答案 0 :(得分:1)
为防止滚动,您可以将样式设置为overflow:hidden;在html元素上。一个很好的方法是在你的css中创建一个html.no-scroll类,并使用jquery来打开和关闭类。
您的问题中没有足够的代码可以直接应用此代码,但这是一个检测页面上任意位置点击以切换滚动行为的示例。
$('body').on('click', toggleScrolling);
function toggleScrolling() {
$('html').toggleClass('no-scroll');
}
&#13;
html.no-scroll {
overflow: hidden;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia eget nisi nec pellentesque. Morbi feugiat nunc non sem accumsan dictum. Donec aliquam lacus nec libero placerat, in placerat lectus condimentum. Maecenas condimentum euismod mauris, vitae
pharetra massa posuere id. Duis eget maximus tortor. Proin suscipit fermentum tellus id maximus. Aliquam scelerisque mauris elit, vel interdum lectus maximus luctus. Maecenas mattis sem ac eros ultrices posuere. Phasellus viverra imperdiet risus, in
ultricies eros pulvinar at. Aliquam et faucibus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Integer dapibus imperdiet felis, eget lobortis eros lobortis eget. Integer et tristique massa, id pellentesque metus. Morbi gravida sem sit amet eros aliquet, quis blandit libero iaculis. Nulla tempor, erat sed vulputate gravida, elit tellus interdum
ante, at tristique tortor turpis quis turpis. Donec consequat ipsum eu felis fermentum, vitae iaculis leo ultricies. Cras dapibus mattis dui. Curabitur at hendrerit urna. Quisque eros lectus, laoreet quis ligula vel, aliquam viverra lacus. Mauris vehicula
congue molestie. Aliquam a lectus ut nulla lobortis vulputate. Fusce porttitor, sapien quis eleifend hendrerit, ante neque pharetra nisi, a ultrices felis dolor ac nibh.</p>
<p>Nam feugiat eros in ante sodales, id ultrices turpis volutpat. Integer quis mi mi. Curabitur sem enim, vestibulum non arcu at, vestibulum mollis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris
euismod ante et arcu convallis maximus. Ut ligula libero, placerat non pellentesque eget, luctus sed elit. Nullam sapien lorem, vestibulum lobortis dapibus ut, ullamcorper at sem. Nunc ultrices ligula vel blandit fringilla.</p>
<p>Integer condimentum ullamcorper faucibus. Donec faucibus vestibulum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quis venenatis orci, sit amet semper sapien. Mauris blandit volutpat ipsum ut
pulvinar. Quisque posuere commodo dui, in vestibulum ipsum molestie eget. Phasellus vel egestas mi. Fusce egestas risus quis nisl sagittis, in laoreet ante facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras facilisis orci eget efficitur elementum. Suspendisse orci arcu, iaculis a nibh tincidunt, finibus eleifend orci. In ac venenatis leo. Vivamus sit amet augue tempus, vestibulum odio suscipit, auctor odio. Suspendisse sit amet posuere elit, nec placerat
mi.
</p>
<p>Curabitur nunc elit, sollicitudin vitae ligula eu, eleifend cursus ante. Proin mi sapien, ultrices id faucibus ac, vehicula vitae lectus. Sed eros neque, molestie in nisi non, ullamcorper porta leo. Vivamus cursus tincidunt semper. Maecenas id faucibus
dolor. Praesent faucibus tempor massa, vitae mollis nisl pretium a. In scelerisque ullamcorper neque, eget maximus tortor venenatis sit amet. Nullam sit amet dui at odio vulputate blandit id sit amet orci. Pellentesque gravida, quam sed efficitur sollicitudin,
velit elit finibus felis, sit amet pellentesque nisl mauris non urna. Phasellus hendrerit nec ante ac molestie. Curabitur sed pulvinar mauris. Donec at volutpat sapien. Sed consectetur odio a ipsum ullamcorper dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia eget nisi nec pellentesque. Morbi feugiat nunc non sem accumsan dictum. Donec aliquam lacus nec libero placerat, in placerat lectus condimentum. Maecenas condimentum euismod mauris, vitae
pharetra massa posuere id. Duis eget maximus tortor. Proin suscipit fermentum tellus id maximus. Aliquam scelerisque mauris elit, vel interdum lectus maximus luctus. Maecenas mattis sem ac eros ultrices posuere. Phasellus viverra imperdiet risus, in
ultricies eros pulvinar at. Aliquam et faucibus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Integer dapibus imperdiet felis, eget lobortis eros lobortis eget. Integer et tristique massa, id pellentesque metus. Morbi gravida sem sit amet eros aliquet, quis blandit libero iaculis. Nulla tempor, erat sed vulputate gravida, elit tellus interdum
ante, at tristique tortor turpis quis turpis. Donec consequat ipsum eu felis fermentum, vitae iaculis leo ultricies. Cras dapibus mattis dui. Curabitur at hendrerit urna. Quisque eros lectus, laoreet quis ligula vel, aliquam viverra lacus. Mauris vehicula
congue molestie. Aliquam a lectus ut nulla lobortis vulputate. Fusce porttitor, sapien quis eleifend hendrerit, ante neque pharetra nisi, a ultrices felis dolor ac nibh.</p>
<p>Nam feugiat eros in ante sodales, id ultrices turpis volutpat. Integer quis mi mi. Curabitur sem enim, vestibulum non arcu at, vestibulum mollis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris
euismod ante et arcu convallis maximus. Ut ligula libero, placerat non pellentesque eget, luctus sed elit. Nullam sapien lorem, vestibulum lobortis dapibus ut, ullamcorper at sem. Nunc ultrices ligula vel blandit fringilla.</p>
<p>Integer condimentum ullamcorper faucibus. Donec faucibus vestibulum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quis venenatis orci, sit amet semper sapien. Mauris blandit volutpat ipsum ut
pulvinar. Quisque posuere commodo dui, in vestibulum ipsum molestie eget. Phasellus vel egestas mi. Fusce egestas risus quis nisl sagittis, in laoreet ante facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras facilisis orci eget efficitur elementum. Suspendisse orci arcu, iaculis a nibh tincidunt, finibus eleifend orci. In ac venenatis leo. Vivamus sit amet augue tempus, vestibulum odio suscipit, auctor odio. Suspendisse sit amet posuere elit, nec placerat
mi.
</p>
<p>Curabitur nunc elit, sollicitudin vitae ligula eu, eleifend cursus ante. Proin mi sapien, ultrices id faucibus ac, vehicula vitae lectus. Sed eros neque, molestie in nisi non, ullamcorper porta leo. Vivamus cursus tincidunt semper. Maecenas id faucibus
dolor. Praesent faucibus tempor massa, vitae mollis nisl pretium a. In scelerisque ullamcorper neque, eget maximus tortor venenatis sit amet. Nullam sit amet dui at odio vulputate blandit id sit amet orci. Pellentesque gravida, quam sed efficitur sollicitudin,
velit elit finibus felis, sit amet pellentesque nisl mauris non urna. Phasellus hendrerit nec ante ac molestie. Curabitur sed pulvinar mauris. Donec at volutpat sapien. Sed consectetur odio a ipsum ullamcorper dignissim.</p>
&#13;