Question

您好我正在使用Rails，我正在尝试使用此处显示的One Page Scroll插件：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/ javascripts和stylesheets目录中包含了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%;
}

.disabled-onepage-scroll .onepage-pagination { display：none; }

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

Answer 1

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

Answer 2

知道这是一个老帖子，但遇到了同样的问题。我认为您的问题是因为您有插件可以执行以下操作：

调用<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>

从那里开始，一切都像是一种魅力。

Rails 4：查看当使用单页滚动v1.3时不滚动

2 个答案: