我在the Unslider plugin上使用this website。
每次按> (右键)时,整个页面(可能是body
元素)向右移动25个像素。
每次按< (左键),整个页面都会移回正常位置。
您可以在此处查看问题:
http://energy-solutions.herokuapp.com
以下是html.erb
文件:
<div class="imagecarousel has-dots">
<ul>
<li style='background-image: url("/assets/solar-18694222104b6ced788b349cd63f53cc.jpg")'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>The future is in our hands.</p>
</div>
</li>
<li style='background-image: url("/assets/wind-eaac506eb1ae1d11c572e1bec4b04ca2.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>Energy is beautiful.</p>
</div>
</li>
<li style='background-image: url("/assets/geothermal-58b3e2d8eeb063847de79d733f7611e0.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>Clean. Safe. Efficient.</p>
</div>
</li>
<li style='background-image: url("/assets/solar-46b6cfecb2169a3d14552f90196a56fb.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>The world needs it.</p>
</div>
</li>
<li style='background-image: url("/assets/solarpanels-c787e429912f640d7770f1cc482073ad.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
</div>
</li>
<li style='background-image: url("/assets/wind-ee6159e5689bd3475afc83cefc876069.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
</div>
</li>
</ul>
</div>
以下是我在application.js
中的称呼方式:
$('.imagecarousel').unslider({
fluid: true,
dots: true,
keys: true,
speed: 500
});
有什么想法吗?它只发生在这个页面上,所以我假设它与图像轮播有关。
修改:此问题仅出现在Firefox中。 Chrome和Safari似乎没有这个问题。
如果我要发布可能与解决此问题相关的更多代码,请告诉我。
答案 0 :(得分:0)
添加以下代码似乎解决了这个问题。这可能不是解决此问题的正确方法,但它现在似乎适用于所有浏览器。
html{
overflow-x: hidden;
}
head{
overflow-x: hidden;
}