如何在网页的特定部分实现水平滚动

我正在网站上工作。我想设计一个横向滚动的特定部分。当我们到达该部分时，页面的滚动应该停止，只有该部分应该滚动。我怎样才能做到这一点？如何在网页的特定部分实现水平滚动

这里是一个link.i想正是这一点（─“上flipkart做生意是很容易”）
https://seller.flipkart.com/

来源

2016-11-23 Juhi Mathur

如果你使用jQuery你可以用scrollLeft（）方法 –

的[垂直滚动可能的复制尝试。水平运动]（http://stackoverflow.com/questions/34536582/vertically-scrolling-horizontal-movement） – XYZ

您可能需要使用iframe标签。更多信息here，

来源

2016-11-23 05:05:37

您可以使用scrollLeft（）jQuery的方法，这里是JSFiddle，你也可以使用jQuery插件，像jquery.scrollpane.js/jquery.mousewheel.js。鼠标滚动演示的另一个选项是here。

希望它能帮助您解决问题。谢谢！

$(".wrapper2").scroll(function(){ 
    $(".wrapper1") 
     .scrollLeft($(".wrapper2").scrollLeft()); 
});

来源

2016-11-23 05:18:09

你指的是使用一种称为scrollmagic

http://scrollmagic.io

这是一个非常强大的脚本，可以让你创建许多不同的影响图书馆的网站，它的接缝他们结合sticky/pinning behavior与multiple scroll directions。

并添加一些滚动自定义事件自动启动正确。

退房的示例的完整列表： http://scrollmagic.io/examples/index.html

来源

2016-11-23 05:36:33 Fortes

，你可以这样做，使用溢出-X：滚动;用于水平滚动并且溢出-y：滚动;为垂直滚动

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
div{ 
 
    background-color:blue; 
 
    } 
 
section{ 
 
    width:200px; 
 
    height:100px; 
 
    background-color:#fff; 
 
    overflow-x:scroll; 
 
    margin-left:10%; 
 
    overflow-y:scroll; 
 
    }

<div> 
 
    <h1>othercontets</h1> 
 
    <p>#ADH Design....Videocon Virtual Mobile Phone Using HTML,CSS and JQuery 
 

 
Videocon Virtual Mobile Phone Using HTML,CSS and JQuery 
 

 

 

 

 

 
(click on the above image to view the live demo) 
 

 
or 
 

 

 

 
.........................wait for more updates .................................... 
 
.............................thanks for watching....................................</p> 
 
    <section> 
 
    <h1> here is the horizontal scroll</h1> 
 
    <p>#ADH Design....Videocon Virtual Mobile Phone Using HTML,CSS and JQuery 
 

 
Videocon Virtual Mobile Phone Using HTML,CSS and JQuery 
 

 

 

 

 

 
(click on the above image to view the live demo) 
 

 
or 
 

 
(click on this link to view the live demo) 
 

 

 
Key Features :- 
 
1.This Design is Completely using HTML and CSS excluding two Images(one for background and other for logo). 
 
2.You Can Check Full Code and Live Demo on Code-pen By Clicking The Above Image. 
 
3. JQuery and JS is only used for two purposes(to show current date and time on screen and to manage click events.) 
 
4.You can see the current date and time on screen. 
 
Before Use :- 
 
1.You need to change the view settings on code-pen(click on change view and then select the snippet in which there code boxes are on right side) for better appearance. 
 

 

 

 

 

 

 
2.You need to unlock the Phone before use it.To unlock the Phone use need to click unlock button and then hash button. 
 
    
 

 
(If You Press other Icons Like Star ,Which will Show Some Warning Messages) 
 
3.This system allows you to dial a maximum of 12 numbers at a time (you can dial a number by clicking on corresponding button). 
 
4.You need to click call-disconnect button to clear all dialed numbers. 
 

 

 

 

 
(Note : I'm used calc() function on this code to adjust the left and right margin ,it support only on latest version of browsers.so recommended to use latest version for better appearance). 
 

 
Special Credits :- 
 
Sarath .P (Graphic,Web Designer). 
 
Antony Naveen (Software Tester). 
 
My GECI mates(for their mass support). 
 
Stack overflow community(they push me when i got stuck) 
 
and You for watching this 
 

 
.........................wait for more updates .................................... 
 
.............................thanks for watching....................................</p> 
 
    </section> 
 
</div>

来源

2016-11-23 06:20:17

如何在网页的特定部分实现水平滚动

回答

相关问题