Fatal编程技术网
  • javascript/
  • Javascript Rails 4：视图不'；使用单页滚动v1.3时不滚动

Javascript Rails 4：视图不'；使用单页滚动v1.3时不滚动

javascript jquery css ruby-on-rails plugins

Javascript Rails 4：视图不'；使用单页滚动v1.3时不滚动,javascript,jquery,css,ruby-on-rails,plugins,Javascript,Jquery,Css,Ruby On Rails,Plugins,您好，我正在使用Rails，我正在尝试使用此处显示的单页滚动插件： 我有一个几乎完全空白的应用程序（在视图和样式表方面）。以下是当前未滚动的页面的布局和视图： layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>Lorem</title> <%= stylesheet_link_tag "application", media: "a

您好，我正在使用Rails，我正在尝试使用此处显示的单页滚动插件：

我有一个几乎完全空白的应用程序（在视图和样式表方面）。以下是当前未滚动的页面的布局和视图：

layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Lorem</title>
    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
</head>
<body>
  <div class='main'> <!--One Page! -->
    <div class='row'>
      <div id='tasmbloch'>
        <div id='id'>
          <%= image_tag 'ban_Trans.png' %>
       </div>
      </div>
    </div>

   <%= yield %>
 </div>
</body>
</html>
.已禁用一页滚动。一页分页{ 显示：无； }

查看
正文
中的
溢出：隐藏
。尝试
溢出：auto
知道这是一篇旧文章，但遇到了同样的问题。我认为你的问题是因为你让插件做了以下工作：

调用
，而不是页脚中的函数：

...
<script>
$(document).ready(function(){
    $(".main").onepage_scroll({
            sectionContainer: "section",
            easing: "ease",

            animationTime: 1000,
            pagination: true,
            updateURL: false,
            beforeMove: function(index) {},
            afterMove: function(index) {},
            loop: false,
            keyboard: true,
            responsiveFallback: false,
            direction: "vertical"
        });
...
</script>

。。。
$（文档）.ready（函数（）{
$（“.main”）.onepage\u滚动({
节容器：“节”，
放松：“放松”，
动画时间：1000，
分页：正确，
更新：错，
beforeMove:函数（索引）{}，
后移：函数（索引）{}，
循环：false，
键盘：没错，
响应回退：错误，
方向：“垂直”
});
...
从那以后，一切对我来说都很有吸引力。

你不需要在你的应用程序中调用CSS文件吗？检查身体的高度。是的，但我认为当你包含带有
样式表链接标记的应用程序时，就可以这样做了。
。非常肯定，它会递归地包含所有样式表。高度设置为100%，谢谢appostolis，但确实如此不起作用。而且，由于这是随插件提供的CSS，我想我不需要改变任何一个，因为它应该（而且在其他peopls rails项目中也有）开箱即用。这正是为什么这特别令人沮丧的原因：（嗯，是的，我想也许Rails的CSS覆盖了插件中的某些内容。也许值得尝试与插件的创建者联系？ 
body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}

body, .onepage-wrapper, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d; 
}

.onepage-wrapper .section {
  width: 100%;
  height: 100%; 
}

.onepage-pagination {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0; 
}
.onepage-pagination li {
  padding: 0;
  text-align: center;
}
.onepage-pagination li a{
  padding: 10px;
  width: 4px;
  height: 4px;
  display: block;

}
.onepage-pagination li a:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.onepage-pagination li a.active:before{
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid black;
  margin-top: -4px;
  left: 8px;
}

.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
  overflow: auto;
}

.disabled-onepage-scroll .onepage-wrapper .section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  -ms-transform: none !important;
  min-height: 100%;
}

body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
  position: inherit;
}

...
<script>
$(document).ready(function(){
    $(".main").onepage_scroll({
            sectionContainer: "section",
            easing: "ease",

            animationTime: 1000,
            pagination: true,
            updateURL: false,
            beforeMove: function(index) {},
            afterMove: function(index) {},
            loop: false,
            keyboard: true,
            responsiveFallback: false,
            direction: "vertical"
        });
...
</script>