Rails 4:当使用One Page Scroll v1.3时，视图不会滚动

Rails 4: View Doesn't Scroll when using One Page Scroll v1.3

本文关键字：3时 v1 视图 滚动 Scroll Page One Rails      更新时间：2023-09-26

你好，我正在使用Rails，我正试图使用这里显示的一页滚动插件:http://www.thepetedesign.com/demos/onepage_scroll_demo.html

我有一个几乎香草空白应用程序(在视图和样式表方面)。下面是当前不滚动的页面的布局和视图:

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>

对应的视图:

<div class='section'>
       <%= image_tag "lorem_borem.png"%>
</div>
<div class='section'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum."
</div>

我已经包括在我的app/assets/ javascript和样式表目录的javascript和对应于单页滚动的CSS。我在jQuery代码片段中写了一个console.log()语句，调用插件来确认它正在被调用，它是。

这是通过application.css间接包含的一页滚动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%;
}

。onpage -pagination {显示:没有;} 

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

知道这是一个老帖子，但遇到了同样的问题。我认为你的问题是因为你得到的插件工作做以下:

调用<head></head>中的函数，而不是页脚:

...
<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>

从那时起，一切都对我很有吸引力。

看body中的overflow: hidden。试试overflow: auto

相关文章：