horizontal ScrollView bounces back issue programmatically

Question

I have a simple ScrollView with 4 buttons inside of it and I would like to make that a horizontal ScrollView .

This is how I set it up:

let itemScrollView: UIScrollView = {
    let v = UIScrollView()
    v.translatesAutoresizingMaskIntoConstraints = false
    v.backgroundColor = .red
    return v
}()

And I constrain it and its content like this:

itemView.addSubview(itemScrollView)
itemScrollView.addSubview(imageButton)
itemScrollView.addSubview(priceButton)
itemScrollView.addSubview(linkButton)
itemScrollView.addSubview(noteButton)
self.addSubview(dropDownButton)

itemView.heightAnchor.constraint(equalToConstant: 60).isActive = true

dropDownButton.heightAnchor.constraint(equalToConstant: 35).isActive = true
dropDownButton.widthAnchor.constraint(equalToConstant: 150).isActive = true
dropDownButton.trailingAnchor.constraint(equalTo: itemView.trailingAnchor, constant: -20).isActive = true
dropDownButton.centerYAnchor.constraint(equalTo: itemView.centerYAnchor).isActive = true

itemScrollView.topAnchor.constraint(equalTo: itemView.topAnchor).isActive = true
itemScrollView.leadingAnchor.constraint(equalTo: itemView.leadingAnchor).isActive = true
itemScrollView.trailingAnchor.constraint(equalTo: dropDownButton.leadingAnchor).isActive = true
itemScrollView.bottomAnchor.constraint(equalTo: itemView.bottomAnchor).isActive = true

imageButton.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageButton.widthAnchor.constraint(equalToConstant: 25).isActive = true
imageButton.centerYAnchor.constraint(equalTo: itemScrollView.centerYAnchor).isActive = true
imageButton.leadingAnchor.constraint(equalTo: itemScrollView.leadingAnchor, constant: 20).isActive = true

priceButton.heightAnchor.constraint(equalToConstant: 25).isActive = true
priceButton.widthAnchor.constraint(equalToConstant: 25).isActive = true
priceButton.centerYAnchor.constraint(equalTo: itemScrollView.centerYAnchor).isActive = true
priceButton.leadingAnchor.constraint(equalTo: imageButton.leadingAnchor, constant: 45).isActive = true

linkButton.heightAnchor.constraint(equalToConstant: 25).isActive = true
linkButton.widthAnchor.constraint(equalToConstant: 25).isActive = true
linkButton.centerYAnchor.constraint(equalTo: itemScrollView.centerYAnchor).isActive = true
linkButton.leadingAnchor.constraint(equalTo: priceButton.leadingAnchor, constant: 45).isActive = true

noteButton.heightAnchor.constraint(equalToConstant: 25).isActive = true
noteButton.widthAnchor.constraint(equalToConstant: 25).isActive = true
noteButton.centerYAnchor.constraint(equalTo: itemScrollView.centerYAnchor).isActive = true
noteButton.leadingAnchor.constraint(equalTo: linkButton.leadingAnchor, constant: 45).isActive = true

In the end it looks like this, exactly how I want it (4th button is hidden behind the dropDownButton ), but you can only scroll vertical .

Update:

By adding this line of code, I can scroll horizontally:

v.alwaysBounceHorizontal = true

However now the problem is that it always "bounces back" to the left after scrolling. How can I fix that issue?

Answer 1

You want to conform your view controller to UIScrollViewDelegate , set scrollView.delegate = self and implement the scrollViewDidScroll method like this:

func scrollViewDidScroll(scrollView: UIScrollView) {
    if scrollView.contentOffset.y != 0 {
        scrollView.contentOffset.y = 0
    }
}