草庐IT

javascript - 当元素进入视口(viewport)时，在离开视口(viewport)之前水平滚动其全部内容

coder 2023-08-07 原文

我有一个水平滚动元素，其中包含位于页面下方 View 之外的图像。

首先，我有以下标记和样式。我使用了 overflow:hidden 因为我不想要滚动条。为了简单起见，我还删除了一些不太重要的样式:

<ul id="players-horizontal">
    <li class="player-box"><img src="..."></li>
    <li class="player-box"><img src="..."></li>
    ...
</ul>

#players-horizontal {
    overflow: hidden;
    height: 340px;
    width: 100%;
}

#players-horizontal .player-box {
    display: inline-block;
    width: 300px;
    height: 340px;
}

#players-horizontal .player-box:first-child {
    margin-left: 90%;
}

这给了我以下观点:

当这个元素滚动到 View 中时，我想水平滚动它的全部内容直到它即将离开 View ，这样用户可以在向下滚动的同时看到它的全部内容。

当元素即将离开视口(viewport)时，所需的外观将是:

反之亦然，当用户向上滚动时应该发生相反的 Action 。

要知道元素何时进入视口(viewport)，我使用了 Waypoints插件:

var waypoints = $('#players-horizontal').waypoint(
    function(direction) {
        if (direction === 'down') {
            //console.log("Into view");
            $window.scroll(function () {
                var s = $(this).scrollTop();

            });
        } else {
            //console.log("Out of view");
            $window.scroll(function () {
                var s = $(this).scrollTop();

            });
        }
    }, { offset: '90%' }
);

但我仍然无法理解下一步该做什么，更具体地说，如何计算出在元素离开视口(viewport)之前的短时间内滚动(改变边距)多少，确保其中的所有元素在它之前显示。

如果能在终点线上提供帮助，我将不胜感激。我不期望工作代码，虽然我很感激，但我真的只需要一个简单易懂的解释来说明需要什么。

更新:

我刚刚尝试使用另一种方法，该方法不使用 Waypoints 插件而是使用 ScrollMagic .这无疑减轻了很多所需的工作。

var scene = new ScrollMagic.Scene({triggerElement: "#players-horizontal", duration: 200})
.addTo(controller)
.on("progress", function (e) {
    console.log((e.progress * 100));
});

上面的代码片段检测元素 #players-horizo​​ntal 何时进入和离开视口(viewport)。

当元素在向下滚动时进入视口(viewport)底部时，返回值从 0 开始，在离开视口(viewport)顶部之前停止在 100。当我向上滚动时，该值从 100 开始，当元素即将离开视口(viewport)底部时停止在 0。所以，我肯定更接近了。

最佳答案

我会以不同的方式考虑这个问题。首先我会考虑使用翻译使其更容易处理。你还需要一些 JS 代码来处理这个

我将有一个主容器，我将通过 90% 进行翻译以产生边距效果，然后我会将其中的内容从 0% 翻译为 100%。翻译将考虑滚动和屏幕高度。基本上，当元素进入屏幕时，我将开始翻译，考虑偏移顶部和屏幕高度之间的差异。

这是第一个例子。

var h =document.querySelector('#players-horizontal');

document.body.onscroll = function(e) {
  
  var offset = h.getBoundingClientRect()
  var top = offset.top;
  if(top < window.innerHeight) {
     h.style.setProperty('--x',(top - window.innerHeight)+'%');
  }
}
body {
 margin:0;
 overflow-x:hidden;
}
.top,.bottom {
  min-height:150vh;
  background:yellow;
}
.container {
    transform:translateX(90%);
}
#players-horizontal {
    white-space:nowrap;
    margin:0;
    padding:0;
    display:inline-block; /*This is important !!*/
    transform:translateX(var(--x,0%));
    border:5px solid;
}

#players-horizontal .player-box {
    display: inline-block;
    width: 200px;
    height: 240px;
    margin:0 10px;
    background:red;
}

#players-horizontal .player-box:first-child {
    background:green;
    margin-left:0;
}
#players-horizontal .player-box:last-child {
    background:blue;
    margin-right:0;
}
<div class="top"></div>
<div class="container">
<ul id="players-horizontal">
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
</ul>
</div>
<div class="bottom"></div>

上面的内容将创建滚动效果，但现在我们需要定义正确的值。

很明显，我们需要在 top = window.innerHeight (translate(0%)) 和 top = 0 开始滚动> 我们希望我们的元素完全显示，最后一个元素在右边缘，这意味着我们需要 translate(-100% + width of screen) 但是因为屏幕的宽度也是与容器宽度相同，并且我们已经将容器翻译了 90% 那么我们只能达到 translate(-100%) (我们可以在最后添加负边距元素来纠正位置)。

我们只需要将差值 (top - window.innerHeight) 转换为百分比值，将 window.innerHeight 视为 100% (当 top=0 时)。

var h =document.querySelector('#players-horizontal');

document.body.onscroll = function(e) {
  
  var offset = h.getBoundingClientRect()
  var top = offset.top;
  if(top < window.innerHeight && top >=0) {
     h.style.setProperty('--x',(top - window.innerHeight)*(100/window.innerHeight)+'%');
  }
}
body {
 margin:0;
 overflow-x:hidden;
}
.top,.bottom {
  min-height:150vh;
  background:yellow;
}
.container {
    transform:translateX(90%);
}
#players-horizontal {
    white-space:nowrap;
    margin:0;
    padding:0;
    display:inline-block; /*This is important !!*/
    transform:translateX(var(--x,0%));
    border:5px solid;
}

#players-horizontal .player-box {
    display: inline-block;
    width: 200px;
    height: 240px;
    margin:0 10px;
    background:red;
    vertical-align:top;
}

#players-horizontal .player-box:first-child {
    background:green;
    margin-left:0;
}
#players-horizontal .player-box:last-child {
    background:blue;
    margin-right:-10vw; /*the missing 10%*/
}
<div class="top"></div>
<div class="container">
<ul id="players-horizontal">
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
</ul>
</div>
<div class="bottom"></div>

我使用了 CSS 变量(个人偏好)，但这并不是强制性的，您可以简单地使用 JS 代码设置转换:

var h =document.querySelector('#players-horizontal');

document.body.onscroll = function(e) {
  
  var offset = h.getBoundingClientRect()
  var top = offset.top;
  if(top < window.innerHeight && top >=0) {
     h.style.transform="translateX("+(top - window.innerHeight)*(100/window.innerHeight)+'%)';
  }
}
body {
 margin:0;
 overflow-x:hidden;
}
.top,.bottom {
  min-height:150vh;
  background:yellow;
}
.container {
    transform:translateX(90%);
}
#players-horizontal {
    white-space:nowrap;
    margin:0;
    padding:0;
    display:inline-block; /*This is important !!*/
    transform:translateX(0%);
    border:5px solid;
}

#players-horizontal .player-box {
    display: inline-block;
    width: 200px;
    height: 240px;
    margin:0 10px;
    background:red;
    vertical-align:top;
}

#players-horizontal .player-box:first-child {
    background:green;
    margin-left:0;
}
#players-horizontal .player-box:last-child {
    background:blue;
    margin-right:-10vw;
}
<div class="top"></div>
<div class="container">
<ul id="players-horizontal">
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
    <li class="player-box"></li>
</ul>
</div>
<div class="bottom"></div>

关于javascript - 当元素进入视口(viewport)时，在离开视口(viewport)之前水平滚动其全部内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54419901/

viewportjavascriptcodeplayer-boxplayers-horizontaljqueryhtmlcss

有关javascript - 当元素进入视口(viewport)时，在离开视口(viewport)之前水平滚动其全部内容的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  3. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  4. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  5. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  6. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  7. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  8. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  10. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

随机推荐